解决v-if 与 v-for 同时使用报错的问题
在进行项目开发的时候因为在一个标签上同时使用了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>到此这篇关于v-if 与 v-for 同时使用会报错的文章就介绍到这了,更多相关v-if 与 v-for 使用报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue 2.0 侦听器 watch属性代码详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了封装一下vue中的axios，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
图文详解Element-UI中自定义修改el-table样式
elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下2022-08-08
v-model在Vue里面是一个语法糖,数据的双向绑定,本质上还是通过 自定义标签的attribute传递和接受,下面这篇文章主要给大家介绍了关于如何使用Vue3设计实现一个Model组件的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue移动端UI框架实现仿qq侧边菜单组件,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-03-03
在本篇文章里小编给大家分享的是一篇关于vue props 单项数据流实例分享内容，需要的朋友们可以参考下。2020-02-02
下面小编就为大家分享一篇vue.js,ajax渲染页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
模式是 Vue CLI 项目中一个重要的概念，下面这篇文章主要给大家介绍了关于Vue CLI中模式与环境变量的相关资料，需要的朋友可以参考下2021-05-05
这篇文章主要介绍了vue-resource调用promise取数据方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
在商场大家经常看到停车收费倒计时支付页面,今天小编通过本文给大家分享vue 倒计时结束跳转页面功能,感兴趣的朋友一起看看吧2023-10-10
最新评论