vuejsのv-forループの出力に重複する値を避ける方法

Question

v-のループの出力で重複した値を削除または除外します。したがって、 'John'は出力に2回表示される代わりに1回だけ表示されます。それは可能ですvuejs？

JS

var app = new Vue({ 
      el: "#app", 
      data: function() { 
        return { 
         searchFields: ['number', 'name'], 
         search: '', 
         items: [ 
           { name: 'Mary'}, 
           { name: 'John'}, 
           { name: 'John'}, 
           { name: 'William'} 
          ] 
         }; 
      } 
}); 

Codepen

Answer 1

Vuejs filterByはフィルタ機能に3つの引数を提供するために十分：現在の項目の値が、インデックスを項目と配列全体のVuejsガイドにより示唆されるように、私は、計算された値を使用

methods: { 
     myFilter: function (val, idx, arr) { 
      for(var i = 0; i < idx; i++) { 
      if(arr[i].name === val.name) { 
       return false; 
      } 
      } 
      return true; 
     } 
     } 

Answer 2

だからfilters-documentationをチェックすることによって、あなたがあなた自身のカスタムフィルタを書くことができることがわかります。

したがって、myFilterを持つことで、メソッドに含めるものを定義できます。

v-for="item in items | filterBy myFilter"> 

は今、何かこのようにそれが必要メソッドを追加：これは何

let arr = []; 

var app = new Vue({ 
    el: "#app", 
    data: function() { 
    return { 
     searchFields: ['number', 'name'], 
     search: '', 
     items: [ 
     { name: 'Mary'}, 
     { name: 'John'}, 
     { name: 'John'}, 
     { name: 'William'} 
     ] 
    }; 
    }, 
    // this is where your filter method is defined 
    methods: { 
    myFilter: function(val) { 
     if(arr.indexOf(val.name) === -1) { 
     arr.push(val.name); 
     return val.name; 
     } 
    } 
    } 
}); 

は、あなたの価値があなたの配列arrであるかどうかをチェックします。そうでない場合は、アレイに追加して、後で重複して表示されるのを防ぎます。

item.nameがまだ表示されていない場合のみ、フィルタは名前をビューに返します。

Check it out

*たぶん、これまでよりよい/容易な解決策があるが、今:)

Answer 3

： https://vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results

computed: { 
    uniqueNames: function() { 
     var filtered_array = []; 
     for(var i =0; i < this.items.length; i++) { 
     if(filtered_array.indexOf(this.items[i].name) === -1) { 
      filtered_array.push(this.items[i].name) 
     } 
     } 
    return filtered_array; 
    } 
    } 

このV-のためで：

v-for="name in uniqueNames" 

参照一時配列せずに次の作品my codepen