VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法
更新时间：2023年07月21日 08:55:55 作者：qq2397248986
这篇文章主要介绍了VUE2.0自定义指令与v-if冲突导致元素属性修改错位问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
问题：
VUE自定义指令v-permisson 修改了元素是否隐藏，和v-if一起用时，多个按钮元素同时使用v-permisson和v-if控制展示，后面的v-if=false的按钮元素被消除，其v-permisson的控制效果修改了上一个v-if=true的按钮元素。元素属性修改错位
猜测原因：
v-if=false DOM元素未创建，v-permisson的el参数实际修改操作时定位到了错误的元素上
解决：
1.合并v-v-if的参数到v-permisson参数里
2.v-permisson 支持对象传参，可以控制元素的属性 也可以 用el.remove()删除当前元素。
3.利用vue的双向绑定重新渲染DOM元素，重新刷新元素属性（未生成的元素，刷新后也可以重新生成），具体写法元素绑定值附空值 如 this.orderList = [] ，随后在赋值实际的数据。
v-permisson 案例代码如下：
export default {
bind(el, binding) {
dateDeal(el, binding)
},
update(el, binding) {
dateDeal(el, binding)
},
unbind(el, binding) {
}
}
// 本指令与v-if冲突 删除的元素赋值会错改其他元素的属性***
function dateDeal(el, binding) {
// 数据校验
if (binding.value === null || binding.value === undefined) {
el.remove()
return
}
var permission
var condition
if (binding.value.code !== undefined) {
// 对象入参
permission = binding.value.code + ‘'
condition = binding.value.condition
}
…
}调用：666
到此这篇关于VUE2.0 自定义指令与v-if冲突 导致元素属性修改错位解决的文章就介绍到这了,更多相关vue自定义指令与v-if冲突内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue2+elementUI的el-tree的选中、高亮、定位功能的实现
这篇文章主要介绍了vue2+elementUI的el-tree的选中、高亮、定位功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了vue实现输入框自动跳转功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
使用element+vuedraggable实现图片上传拖拽排序
这篇文章主要为大家详细介绍了使用element+vuedraggable实现图片上传拖拽排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了基于vue-cli3.0构建功能完善的移动端架子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了如何解决ECharts图表切换后缩成一团的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文给大家分析下vue2.0几个重要的与自己目前项目相关的变化，也是vue2.0不可忽视的变化，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
今天小编就为大家分享一篇Vue中控制v-for循环次数的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
实现小游戏可以锻炼自己的逻辑思维能力，也不会很枯燥，完成时会给自己带来一种满足感。本文就将利用Vue和JS实现简单的扫雷小游戏，需要的可以参考一下2022-06-06
npm ERR! code E404在vscode安装插件时报错的两种解决方案
这篇文章主要给大家介绍了关于npm ERR! code E404在vscode安装插件时报错的两种解决方案,关于这个问题,通常是由于插件名称输入错误、网络问题或插件已被删除引起的,文中将两种解决方法都介绍的非常详细,需要的朋友可以参考下2023-04-04
本篇文章主要介绍了vue-cli如何快速构建vue项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最新评论