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>
  1. 新增一个DOM元素包裹前面的v-if或后面的v-has
    <div>
        <el-button v-if="row.status=='0'">编辑</el-button>
    </div>
posted @ 2022-03-05 10:03  M83Feng  阅读(608)  评论(0)    收藏  举报