在 Vue v-for 中跳过 null items 和 null children

Answer 1

一个简单的

v-if

可能会起作用：

<li v-for="item in items" v-if="item !== null" track-by="id">

试一试。如果没有，请这样做：

您可以为此添加一个过滤器（在您的 App 实例之前的

main.js

）：

Vue.filter('removeNullProps', function(object) {
  return _.reject(object, (value) => value === null)
})

然后在模板中：

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

Answer 2

在 Vue 2 中，过滤器已在

v-for

s 中弃用。

现在你应该使用计算属性。下面的演示。

new Vue({
  el: '#app',
  data: {
    items: [
      'item 1',
      'item 2',
      null,
      'item 4',
      null,
      'item 6'
    ]
  },
  computed: {
    nonNullItems: function() {
      return this.items.filter(function(item) {
        return item !== null;
      });
    }
  }
})

<script src="https://unpkg.com/vue@2"></script>
<div id="app">
  Using a computed property:
  <ul>
    <li v-for="item in nonNullItems">
      {{ item }}
    </li>
  </ul>
  <hr>
  Using v-if:
  <ul>
    <li v-for="item in items" v-if="item !== null">
      {{ item }}
    </li>
  </ul>
</div>

Answer 3

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

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

你只需要在你正在经历的数组上运行过滤函数。这是 c# 中的常见用法，发现它在 JavaScript 中也没有什么不同。这基本上会在迭代时跳过空值。

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

Answer 4

只需使用

v-if

来处理它。但首先，不要使用

track-by="id"

因为

null

项目和

null

孩子。您可以在此处查看演示 https://jsfiddle.net/13mtm5zo/1/。

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

Answer 5

Vue.Js 风格指南告诉我们：

“永远不要在与 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://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential