Question

这是我的代码：

HTML

<div class="container">
  <ul>
    <li v-for="item in myList | myFilter">
      {{ item.name }}
    </li>
  </ul>
</div>

JS

Vue.filter('myFilter', function(value){
  return value.filter(function(item) {
    return item.value >= 2;
  });
});

new Vue({
  el: '.container',
  data: {
    message: 'Hello world',
    myList: [
      {
        name: 'item1',
        value: 1
      },
      {
        name: 'item2',
        value: 2
      },
      {
        name: 'item3',
        value: 3
      }
    ]
  }
});

我创建了一个名为myFilter的过滤器来过滤掉那些值等于或大于2的项目。我期望的是，带有item2和item3的过滤列表会出现在页面，但实际上没有出现任何事情。当我使用<li v-for="item in myList">时，它仅显示所有3个项目。

我的代码有问题吗？我已经四处寻找这个问题，但没找到任何与之相关的线程。

Answer 1

Vue过滤器仅用于重新处理插值或v-bind属性中的文本。我认为你最好创建一个计算属性并在v-for中循环它。

Answer 2

您使用的是什么版本的vue.js？

在文档中它说：＆＃34;过滤器可以在两个地方使用：胡须插值和v-bind表达式（后者在2.1.0 +中支持）。＆＃34;

所以你不能在v-for指令中使用它们。您可以使用计算器，如下所示：

<div class="container">
  <ul>
    <li v-for="item in myFilteredList">
      {{ item.name }}
    </li>
  </ul>
</div>

new Vue({
  el: '.container',

  computed: {
    myFilteredList: function() {
      return this.myList.filter(function(item) {
          return item.value >= 2;
       });
      }
  },

  data: {
    message: 'Hello world',
    myList: [
      {
        name: 'item1',
        value: 1
      },
      {
        name: 'item2',
        value: 2
      },
      {
        name: 'item3',
        value: 3
      }
    ]
  }
});

链接到jsfiddle：https://jsfiddle.net/nryzwamm/。

但是，理想情况下，组件应该接受从外部传递给它的已经过滤的数据。这将使您的组件更具可重用性，因为它们将包含较少的特定逻辑，如过滤，在某些其他情况下可能不需要。

为什么过滤后的列表不会出现在Vue.js中？

2 个答案: