有條件filterBy for v-for循環使用子元素數據

我有一套我從api中獲取的項目。貝婁是我從服務器收到的數據的例子。有條件filterBy for v-for循環使用子元素數據

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

每個循環的項目會被分配與從假切換到真基於偏好數據屬性edit: false。有沒有一種方法可以設置有選擇性的「filterBy」，它可以只通過編輯項來篩選：false並跳過篩選edit：true？

請看例子：

Code Pen

感謝。

來源

2016-04-04 Andrius Solopovas

你可以得到編輯的所有對象：（{！返回x.edit}功能（X））與'VAR noEdit假= obj.filter'然後執行你需要的任何計算該結果。 – IrkenInvader

問題是對象被傳遞給子組件。並編輯：false是從內部分配的。而vue.js沒有從父範圍中看到該屬性。它只能看到從服務器獲取的屬性。 –

您可以設置自定義過濾器：http://vuejs.org/guide/custom-filter.html

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

然後在您的視圖它看起來像：

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

來源

2016-04-04 17:27:50 Jeff

它不會起作用，因爲從子元素和父元素中分配的「編輯」屬性不知道它。您的過濾器將不會返回任何內容，因爲產品數組中沒有此類屬性可用於編輯。請參閱[CodePen]（http://codepen.io/asolopovas/pen/RajGrB?editors=0010）示例。 –

然後您需要將更改同步回到父級。而不是像'：products =「產品那樣分配prop：'do'：products.sync =」products「'（或者你在子組件上擁有的任何名稱） – Jeff

如果你想使用'filterBy'數組，你需要編輯產品對象的屬性。如果需要，你可以在'Product'組件的'ready（）'函數中做到這一點 – Jeff

我已經通過克隆我編輯的項目來實現它。通過添加$ 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

來源

2016-04-05 17:03:00

有條件filterBy for v-for循環使用子元素數據

回答

相關問題