v-for和v-if一起使用時的坑

原文：https://www.jianshu.com/p/b84f923e511e

緣由：

在進行項目開發的時候因為在一個標簽上同時使用了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會重復運行在每個v-for中。

正確寫法：使用template標簽進行包裹(template為html5的新標簽，無特殊含義)

<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值寫在包裹的元素中

作者：zhulijun_
鏈接：https://www.jianshu.com/p/b84f923e511e
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。