原文：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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

版权声明：本文为ichenchao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ichenchao/articles/12245014.html