解决VUE中v-for与v-if 不能同时使用的规则

v-for的优先级比v-if高。

解决方法1：修改eslint配置文件忽略v-for与v-if 不能同时使用的规则

.eslintrc.js rules中添加

"vue/no-use-v-if-with-v-for": ["error", {

"allowUsingIterationVar": true  //允许使用迭代变量

}]

 

解决方法2：增加template虚拟标签

将 v-if 和 v-for 分别放在不同标签中

<ul v-if="active">

<li v-for="(item, index) in list" :key="inde">

<p>{{item.name}}</p>

</li>

</ul>

 

 

解决方法3：使用计算属性

如果 v-if 和 v-for 只能放在同一级标签中，使用计算属性进行改造：

let title = "自定义"

<ul v-for="(item, index) in lists(list, title)" :key="index">

<li>{{item.name}}</li>

</ul>

computed: {

    lists () {

        return (item, name) => {

            return item.filter(item => item.name !== name)

        }

    }

}