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冲突内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！