vue.js 中的 FilterBy 完全匹配

Question

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

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

除非 format_id 是，例如 12，否则我会看到所有带有 track_format 1 和 2 的项目。

有没有一种简单的方法可以只显示值构成完全匹配的项目？我可以放弃使用数字，但我觉得我将继续运行解决 "LP" 与 "Deluxe LP".

等格式的问题

Answer 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">

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

Answer 2

我遇到了类似的问题，并编写了一个进行精确匹配的直接替换：

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

希望对您有所帮助！

vue.js 中的 FilterBy 完全匹配

FilterBy exact match in vue.js

javascript

vue.js