解决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使用v-viewer插件实现图片预览和缩放和旋转等功能(推荐)
v-viewer是一个基于viewerjs封装的vue图片预览组件,有预览缩放拉伸旋转切换拖拽等功能,支持配置化，这篇文章主要介绍了Vue使用v-viewer插件实现图片预览和缩放和旋转等功能,需要的朋友可以参考下2023-02-02
element修改form的el-input宽度,el-select宽度的方法实现
有时候像form表单这样，页面的input、select等宽度不一定会是一样的，可能有些长，有些短，本文就介绍了如何element修改form的el-input宽度,el-select宽度的方法实现，感兴趣的可以了解一下2022-02-02
vue.js 使用v-if v-else发现没有执行解决办法
这篇文章主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下2017-05-05
要想实现一个吸顶效果不是很难,网络上有很多教程,其中有一种就是通过fiexd加top来实现,今天突然就想做一个吸顶效果,因为最近都在用vue,所以想用vue来做一个吸顶效果的案例,感兴趣的朋友可以参考下2023-11-11
VUE+elementui组件在table-cell单元格中绘制微型echarts图
这篇文章主要介绍了VUE+elementui组件在table-cell单元格中绘制微型echarts图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要为大家介绍了Vue 的router路由，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
vue-cli3使用 DllPlugin 实现预编译提升构建速度
这篇文章主要介绍了vue-cli3使用 DllPlugin 实现预编译提升构建速度 ,需要的朋友可以参考下2019-04-04
本文主要介绍了electron最小化托盘设置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue隐藏路由的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue-cli中模拟数据的两种方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
最新评论