解决v-if 与 v-for 同时使用报错的问题
时间：2022-09-07 09:49:42|栏目：vue|点击： 次
在进行项目开发的时候因为在一个标签上同时使用了v-for和v-if两个指令导致的报错。
报错代码如下：
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 8}"
v-for="Oitem in Object.keys(cItem)"
:key="Oitem"
v-if="Oitem !== 'title'"
v-model="cItem[Oitem]">
</el-input>
提示错误：The 'undefined' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'
原因：v-for 的优先级比 v-if 的高，所以每次渲染时都会先循环再进条件判断，而又因为 v-if 会根据条件为 true 或 false来决定渲染与否的，所以如果将 v-if 和 v-for一起使用时会特别消耗性能，如果有语法检查，则会报语法的错误。
1. 将 v-for 放在外层嵌套 template （页面渲染不生成 DOM节点） ，然后在内部进行v-if 判断
<template v-for="Oitem in Object.keys(cItem)">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 8}"
:key="Oitem"
v-if="Oitem !== 'title'"
v-model="cItem[Oitem]">
</el-input>
</template>
注意点：key值写在包裹的元素中
2. 如果条件出现在循环内部，不得不放在一起，可通过计算属性computed 提前过滤掉那些不需要显示的项
<template>
<div>
<div v-for="(user,index) in activeUsers" :key="user.index" >{{ user.name }}</div>
</div>
</template>
<script>
export default {
name:'A',
data () {
return {
users: [{name: 'aaa',isShow: true}, {name: 'bbb',isShow: false}]
};
},
computed: {//通过计算属性过滤掉列表中不需要显示的项目
activeUsers: function () {
return this.users.filter(function (user) {
return user.isShow;//返回isShow=true的项，添加到activeUsers数组
})
}
}
};
</script>
