Question

我在vue js中有一个嵌套的for ... in循环。我想要的是如果元素的值是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，则应从列表中省略。

P.S。我知道这可能不是表示数据的最佳方式，但我不负责：）

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) {
  // sorry for using lodash and ES2015 arrow functions :-P
  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中弃用。

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

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即可。但首先，由于track-by="id"项和null子项，请不要使用null。您可以在https://jsfiddle.net/13mtm5zo/1/查看演示。

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

Answer 4

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

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

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

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

Answer 5

VueJs风格指南告诉我们：

“永远不要在v-for的同一元素上使用v-if。”

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

<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

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

5 个答案: