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冲突内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
Vue3的ts报错:类型"{}"上不存在属性"xxx"的两种彻底根治解决方法
这篇文章主要给大家介绍了关于Vue3的ts报错:类型"{}"上不存在属性"xxx"的两种彻底根治解决方法,这是最近做项目中遇到的一个问题,这里给大家总结下解决办法,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue里swiper的一些坑及swiper在vue中的使用,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。这篇文章主要介绍了vue组件与复用,需要的朋友可以参考下2018-04-04
在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢,接下来小编就给大家介绍一下在vuejs中如何实现滑动滚动条来动态加载数据,需要的朋友可以参考下2023-10-10
今天小编就为大家分享一篇Vue监听一个数组id是否与另一个数组id相同的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue 图片路径 “@/assets“ 报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo
这篇文章主要为大家介绍了解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-06-06
这篇文章主要介绍了结合axios对项目中的api请求进行封装操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vue中的v-show,v-if,v-bind的使用示例详解
这篇文章主要介绍了vue中的v-show,v-if,v-bind的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
在Vue实例中,data属性是用户定义的用于存储数据的对象,而_data是Vue内部用于存储数据的对象,本文主要介绍了浅谈vue中的data与_data的关系是什么,感兴趣的可以了解一下2023-12-12
最新评论