如何解决v-if与v-for同时使用报错的问题

这篇文章主要介绍了如何解决v-if与v-for同时使用报错的问题，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

在进行项目开发的时候因为在一个标签上同时使用了v-for和v-if两个指令导致的报错。

报错代码如下：

　　type="textarea"
　　:autosize="{ minRows: 2, maxRows: 8}"
　　v-for="Oitem in Object.keys(cItem)"
　　:key="Oitem"
　　v-if="Oitem !== 'title'"
　　v-model="cItem[Oitem]">

提示错误：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 判断

注意点：key值写在包裹的元素中

2. 如果条件出现在循环内部，不得不放在一起，可通过计算属性computed 提前过滤掉那些不需要显示的项

感谢你能够认真阅读完这篇文章，希望小编分享的"如何解决v-if与v-for同时使用报错的问题"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!