通过vue.js中的完全匹配

Question

I have a list that I want to filter by an id value:

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

This works pretty nicely unless format_id is, eg, 12, at which point I see all items with track_format 1 and 2 as well.

Is there a simple way of only showing items where the values constitute an exact match? I could abandon using numbers, but I feel like I'm going to carry on running into problems with formats like "LP" versus "Deluxe LP".

Answer 1

Well, here's a way I just came up with, using a custom filter, that works (I'd still like to know if this kind of thing is the right sort of approach though) :

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: Actually, that didn't work so well, changes to release tracks were not triggering any kind of update in the view. Next tack, trying to filter with a computed property:

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

<li v-repeat="filteredTracks">

Looks promising so far, but that's what I thought about the last idea...

Answer 2

I encountered a similar issue, and wrote a drop-in replacement that does exact matching:

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

Hope that helps!