文章目录
- 场景：
- 问题：
- 原因：
场景：
列表的操作列有按钮，通过v-directive指令控制按钮显隐；首次触发了v-directive指令，控制按钮显隐正常；但是再次点击条件查询后，列表数据变化了渲染内容也正常，但是v-directive指令未触发，导致按钮显隐不正常。
问题：
初始化时触发了指令，但是数据更新后未触发
原因：
指令生命周期触发不全
自定义指令 v-dataAreaTableBtn 仅定义了 mounted 生命周期，数据更新时未触发 update 钩子
需补充 update 生命周期以响应数据变 即可
import { download } from '@/utils/download.js'// 提取公共逻辑
function updateButtonVisibility(el, binding) {// console.log('%c【' + '触发指令' + '】打印', 'color:#fff;background:#0f0')let data_area = sessionStorage.getItem('data_area') // 放最外层会取不到switch (data_area) {case null:el.style.display = ""breakcase undefined:el.style.display = ""breakcase 2:el.style.display = "" // 2区下的列表数据按钮直接放开 (因为说2区不会有3区数据 所以直接放开)breakcase "2":el.style.display = ""breakcase '3':el.style.display = (!binding.value ? true : binding.value == data_area) ? "" : "none" // 3区下的列表数据按钮根据来源判断 3的显示 2的隐藏breakcase 3:el.style.display = (!binding.value ? true : binding.value == data_area) ? "" : "none"breakdefault:break}
}export default {install(Vue) {// 其他指令等Vue.directive('download', {mounted(el, binding) {el.addEventListener('click', () => {download('', binding.value || '', 'url')})},})// 自定义指令Vue.directive('dataAreaTableBtn', {mounted(el, binding) { // 初始化钩子updateButtonVisibility(el, binding)},updated(el, binding) { // 新增更新钩子updateButtonVisibility(el, binding)}});},
}