子要素データを使用する条件付きfilterBy for v-forループ

Question

私はAPIから取り出したアイテムのセットを持っています。ベローは、私がサーバーから受け取ったデータの例です。

{ 
    {"name": "example1", "price": 11, "vendor": "vendor_name1" }, 
    {"name": "example2", "price": 12, "vendor": "vendor_name2" }, 
    {"name": "example3", "price": 13, "vendor": "vendor_name3" }, 
} 

これらのループの各項目は、好みに基づいて偽から真にトグルされるデータプロパティedit: falseに割り当てられます。選択した "filterBy"を設定する方法はありますか？それはeditを持つ項目だけをフィルタリングすることができます：falseとスキップフィルタリングedit：true？

Code Pen

ありがとう：

例を参照してください。

Answer 1

カスタムフィルタ設定することができます。私は編集項目をクローニングすることによって、それを達成している

<div v-for="product in products | editing"></div> 

Answer 2

：次に、あなたのビューでは次のようになりhttp://vuejs.org/guide/custom-filter.html

Vue.filter('editing',function(obj){ 
    return !obj.edit; 
}); 

を。 $ removeByメソッドと$ cloneを追加することにより

Vue.prototype.$removeBy = (arr, key, val) => { 
    let index = arr.findIndex((e) => e[ key ] === val); 
    if (index > -1) { 
     arr.splice(index, 1); 
    } 
}; 

Vue.prototype.$clone = (obj) => { 
    var target = {}; 
    for (var i in obj) { 
     if (obj.hasOwnProperty(i)) { 
      target[ i ] = obj[ i ]; 
     } 
    } 
    return target; 
}; 

実際の動作例はこちらです。

CodePen