v-if 和自定义指令同时使用导致指令无效的问题

v-if 和自定义指令同时使用导致指令无效的问题

    <el-button v-if="row.status=='0'">编辑</el-button>
    <el-button v-has="'marketing:cluster:details'">查看</el-button>
    <el-button v-has="'marketing:cluster:data'")" >数据</el-button>
复制代码

问题: 第三个v-has失效

问题出现原因: 不应该手动更改由 Vue 控制的 DOM。否则 Vue 将无法再次正确更改它 解决方法:

1. 将全部v-has移动至v-if前面
2. 将v-has前的v-if改为v-show

    <el-button v-show="row.status=='0'">编辑</el-button>
复制代码

3. 新增一个DOM元素包裹前面的v-if或后面的v-has

    <div>
        <el-button v-if="row.status=='0'">编辑</el-button>
    </div>