javascript - Vue JS v-for 按唯一过滤

Question

我的公司正在从 Angular JS 迁移到 Vue。在我需要将 Angular 过滤器的功能复制到 VueJS 之前，它一直非常顺利。原始的 Angular 过滤器看起来像这样:

JS

app.filter('unique', function () {
    return function (collection, keyname) {
        var output = [],
            keys = [];

        angular.forEach(collection, function (item) {
            var key = item[keyname];
            if (keys.indexOf(key) === -1) {
                keys.push(key);
                output.push(item);
            }
        });

        return output;
    };
});

在我的 Vue 中，我有以下内容:

<select class="u-full-width" v-model="newPost.cat">
   <option value="" selected="selected">Choose a Category</option>
   <option v-for="post in posts | unique" selected>{{ post.cat }}</option>
</select>

我想我仍然可以使用相同的过滤器，但我该如何复制它呢？

Answer 1

你应该在这里使用计算属性。正如创建者所说，Vue 中的过滤器应该主要用于文本转换(当然不是规则，但我仍然会使用计算属性)。

在你的组件上:

  computed: {
    uniquePosts: function() {
      var output = [];
      var keys   = [];

      this.posts.forEach(function (post) {
          var key = post[keyname];

          if (keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(post);
          }
      });

      return output;
    }
  }

v-for 模板中的 uniquePosts。

编辑:传递一个键名:

computed: {
   uniquePosts: function () {
      var vm = this;
      return function (keyname) {
         var output = [];
         var keys   = [];

         vm.posts.forEach(function (post) {
             var key = post[keyname];

             if (keys.indexOf(key) === -1) {
                 keys.push(key);
                 output.push(post);
             }
         });

         return output;
      };
   }
}

你可以调用uniquePosts(keyname)。

EDIT2: 修正了变量名，抱歉