网站在线,有经验的网站建设公司,分销软件有哪些,品牌设计公司企业logo设计文章目录 场景#xff1a;问题#xff1a;原因#xff1a; 场景#xff1a;
列表的操作列有按钮#xff0c;通过v-directive指令控制按钮显隐#xff1b;首次触发了v-directive指令#xff0c;控制按钮显隐正常#xff1b;但是再次点击条件查询后#xff0c;列表数… 文章目录 场景问题原因 场景
列表的操作列有按钮通过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) ? : nonebreakdefault: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)}});},
}
