解決v-if 與 v-for 同時(shí)使用報(bào)錯(cuò)的問題

更新時(shí)間：2022年03月29日 09:58:41 作者：輝太狼`

在進(jìn)行項(xiàng)目開發(fā)的時(shí)候因?yàn)樵谝粋€(gè)標(biāo)簽上同時(shí)使用了v-for和v-if兩個(gè)指令導(dǎo)致的報(bào)錯(cuò)，遇到這個(gè)問題如何解決呢？下面小編給大家?guī)砹岁P(guān)于v-if 與 v-for 使用報(bào)錯(cuò)問題分析及解決方法，一起看看吧

在進(jìn)行項(xiàng)目開發(fā)的時(shí)候因?yàn)樵谝粋€(gè)標(biāo)簽上同時(shí)使用了v-for和v-if兩個(gè)指令導(dǎo)致的報(bào)錯(cuò)。

報(bào)錯(cuò)代碼如下：

<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>

提示錯(cuò)誤：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 的優(yōu)先級比 v-if 的高，所以每次渲染時(shí)都會(huì)先循環(huán)再進(jìn)條件判斷，而又因?yàn)?v-if 會(huì)根據(jù)條件為 true 或 false來決定渲染與否的，所以如果將 v-if 和 v-for一起使用時(shí)會(huì)特別消耗性能，如果有語法檢查，則會(huì)報(bào)語法的錯(cuò)誤。

1. 將 v-for 放在外層嵌套 template （頁面渲染不生成 DOM節(jié)點(diǎn)），然后在內(nèi)部進(jìn)行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>

注意點(diǎn)：key值寫在包裹的元素中

2. 如果條件出現(xiàn)在循環(huán)內(nèi)部，不得不放在一起，可通過計(jì)算屬性computed 提前過濾掉那些不需要顯示的項(xiàng)

<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: {//通過計(jì)算屬性過濾掉列表中不需要顯示的項(xiàng)目
　　　　activeUsers: function () {
　　　　　　return this.users.filter(function (user) {
　　　　　　　　return user.isShow;//返回isShow=true的項(xiàng)，添加到activeUsers數(shù)組
　　　　　　})
　　　　}
　　}
};
</script>

到此這篇關(guān)于v-if 與 v-for 同時(shí)使用會(huì)報(bào)錯(cuò)的文章就介紹到這了,更多相關(guān)v-if 與 v-for 使用報(bào)錯(cuò)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: