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

vue

缘由：

在进行项目开发的时候因为在一个标签上同时使用了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值写在包裹的元素中

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2021/12/30 06:46