Vue.js 中的 FilterBy 完全匹配答案

【问题标题】：FilterBy exact match in vue.jsVue.js 中的 FilterBy 完全匹配
【发布时间】：2015-11-14 08:22:27
【问题描述】：

我有一个想要按 id 值过滤的列表：

<li v-repeat="release.tracks | filterBy track_format in 'format_id'">

这很好用，除非 format_id 是，例如，12，此时我也看到所有带有 track_format 1 和 2 的项目。

有没有一种简单的方法只显示值构成完全匹配的项目？我可以放弃使用数字，但我觉得我将继续遇到“LP”与“Deluxe LP”等格式的问题。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

嗯，这是我刚刚想出的一种方法，使用自定义过滤器，~~有效（不过，我仍然想知道这种方法是否正确）~~：

Vue.filter('matching_format_id', function(value, format_id) {
   return value.filter(function(item) {
       return item.format_id === parseInt(format_id);
   });
});

<li v-repeat="release.tracks | matching_format_id track_format">

ETA：实际上，这并没有那么好，发布轨道的更改不会触发视图中的任何类型的更新。下一步，尝试使用计算属性进行过滤：

computed: {
       filteredTracks: function() {
           return this.release.tracks.filter(function (track) {
               return track.format_id === parseInt(vm.track_format);
           });
       }
   },

<li v-repeat="filteredTracks">

到目前为止看起来很有希望，但这是我对最后一个想法的想法......

【讨论】：

天哪，也许这根本行不通：当 release.tracks 更改时，Vue 似乎没有更改列表项...回到绘图板！

【解决方案2】：

我遇到了类似的问题，并写了一个完全匹配的替换：

Vue.filter('exactFilterBy', function(array, needle, inKeyword, key) {
    return array.filter(function(item) {
        return item[key] == needle;
    });
});

希望有帮助！

【讨论】：

谢谢，看起来真的很有用！