如果值为空，则跳过对象项

vue.js Vue.js

Harry路易

2020-03-19

我for ... in在vue js中有一个嵌套循环。我要尝试的是如果元素的值为则跳过元素null。这是html代码：

<ul>
    <li v-for="item in items" track-by="id">
        <ol>
            <li v-for="child in item.children" track-by="id"></li>
        </ol>
    </li>
</ul>

null元素可能同时存在于item和item.children对象中。

例如：

var data = {
   1: {
      id: 1,
      title: "This should be rendered",
      children: {
          100: {
              id: 100,
              subtitle: "I am a child"
          },
          101: null
      }
   },
   2: null,
   3: {
       id: 3,
       title: "Should should be rendered as well",
       children: {}
   }
};

使用此数据时，data[1].children[101]不应渲染，如果data[1].children[100]以后变为null，则应从列表中将其省略。

附言：我知道这可能不是代表数据的最佳方式，但我对此不负责：)

第2412篇《如果值为空，则跳过对象项》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
阿飞Harry 2020.03.19

我建议您不要在同一元素中使用v-if和v-for。我发现有效但不影响性能的是：

<li v-for="(value, key) in row.item.filter(x => x !== null)" :key="key"{{value}}</li>

您只需要在要处理的阵列上运行过滤器功能。这是c＃中的常见用法，发现在JavaScript中没有什么不同。基本上在迭代时将跳过null。

希望这会有所帮助（3年后）。

西门老丝 2020.03.19

VueJs风格指南告诉我们：

“切勿在v-for的同一元素上使用v-if。”

如何根据vue样式指南正确处理v-if和v-for： 

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

参见如何处理更多v-if与v-for此：https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential

古一Near 2020.03.19

只需使用v-if它即可。但首先，不要track-by="id"因为null物品和null孩子而使用。您可以在这里https://jsfiddle.net/13mtm5zo/1/查看演示。

也许更好的方法是在渲染之前先处理数据。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android