Vue.js - 重置filterBy導致

https://jsfiddle.net/72tnpa0o/Vue.js - 重置filterBy導致

<div id="filter-by-example"> 
    <label>Cool</label><input type="checkbox" v-model="cool"> 
    <label>notCool</label><input type="checkbox" v-model="notCool"> 
    <ul> 
    <li v-for="user in users | filterBy cool in 'cool' | filterBy notCool in 'notCool'"> 
     {{ user.name }} 
    </li> 
    </ul> 
</div>` 



new Vue({ 
    el: '#filter-by-example', 
    data: { 
    name: '', 
    users: [ 
     { 
     name: 'Bruce', 
     cool: true, 
     notCool: false 
     }, 
     { 
     name: 'Chuck', 
     cool: false, 
       notCool: true 
     }, 
     { 
     name: 'Jackie', 
     cool: true, 
     notCool: false 
     } 
    ] 
    } 
})

我有一個例如高達在高於小提琴鏈路。我可以通過輸入複選框進行排序，但取消選中篩選器不會重置爲原始結果。

有沒有人知道如何取消選中過濾器按鈕來獲取完整的數組呈現？

來源

2016-07-26 Jeff

嘗試**阿爾弗雷多·EM **的答案。它完美地工作。 https://jsfiddle.net/72tnpa0o/4/ – imrealashu

阿爾弗雷多的解決方案的問題是，它忽略了你的代碼有錯誤的事實。應該事先在組件中定義'cool'和'notCool'。在瀏覽器中打開控制檯並更改複選框：您會看到Vue警告像瘋了一樣燃燒。 –

如果過濾器不適用：假值複選框是空的

嘗試改變這一點：通過

<input type="checkbox" :false-value="" v-model="cool"> 
<input type="checkbox" :false-value="" v-model="notCool">

來源

2016-07-26 23:17:59

你能進一步解釋這背後的原因嗎？我有這樣的感覺，即使它起作用，這也是一個拙劣的解決方案。 –

此解決方案確實有效。謝謝阿爾弗雷多！但是，就像赫克託問，誰能進一步解釋這是如何工作的？ – Jeff

主要的問題在這裏

<input type="checkbox" v-model="cool"> 
<input type="checkbox" v-model="notCool">

是，選擇器的邏輯是錯誤的：現在，如果您取消選中這兩個複選框，您將獲得既是cool也是notCool。它開始工作的原因是因爲代碼中有錯誤（打開控制檯，您將在那裏看到錯誤）：在開始時，cool和notCool都是undefined。

所以首先你需要概述你想要什麼。一旦你做到了這一點，你可以用一個函數來過濾而不是使用外的開箱一個，像這樣：

<li v-for="user in users | filterBy filterCool"> 
    {{ user.name }} 
</li>

而且filterCool應該是這樣的：

filterCool: function (element, i, list) { 
    if (this.showCool && element.cool) return true; 
    if (this.showNotCool && element.notCool) return true; 
    if (!this.showNotCool && !this.showCool) return true; 
    return false; 
}

現在還不是一個完美的解決方案，但是一個很好的開始。選中此項：https://jsfiddle.net/72tnpa0o/5/

來源

2016-07-27 00:11:29

此外請確保爲列表項目添加一個鍵，以便vue可以跟蹤每個項目並顯示相關數據（https://vuejs.org/v2/guide/list.html#key）。

的Vue 2：

<li 
    v-for="(user, key) in users | filterBy filterCool" 
    :key="key" 
> 
{{ user.name }} 
</li>

Vue的1：

<li 
    v-for="user in users | filterBy filterCool" 
    track-by="$index" 
> 
{{ user.name }} 
</li>

來源

2017-12-12 12:55:03

Vue.js - 重置filterBy導致

回答

相關問題