Vue.js過濾清單

Question

我是Vue.js的新手。我試圖顯示一個基於另一個對象的值的過濾列表。 select設置名爲activeSet的對象的值。該值是sets對象中的關鍵。如果該鍵值大於0，我想將它顯示在列表中並按它排序。這裏是我的代碼：

JS

var vm = new Vue({ 
    el: '#app', 
    data: { 
    activeSet: 'all', 
    computed: { 
     activeContents: songs.filter(function(song) { 
     return (song[activeSet] > 0); 
     }) 
    }, 
    songs: { 
     a: { 
     title: 'Hound Dog', 
     all: 0, 
     set1: 2 
     }, 
     b: { 
     title: 'Long Gone', 
     all: 1, 
     set1: 0 
     }, 
     b: { 
     title: 'Novermber Rain', 
     all: 2, 
     set1: 3 
     } 
    }, 
    sets: { 
     all: { 
     name: 'All Songs' 
     }, 
     set1: { 
     name: 'Acoustic' 
     } 
    } 
    } 
}) 

HTML

<div id="app"> 
    <select v-model="activeSet"> 
    <option v-for="(set,key) in sets" :value="key">{{set.name}}</option> 
    </select> 
    <ul id="menu"> 
    <li v-for="(song,key) in activeContents" :id="key" :is-active="song.show" :key="key" @click="activeSong=key">{{ song.title }}</li> 
    </ul> 
</div> 

小提琴 Here is the fiddle

旁註：如果該值大於0它需要inclu ded然後按該值排序。我甚至沒有深入分類，但如果可以按大於0的那些值進行排序，則可以按這些獎勵積分排序。

Answer 1

計算屬性未在data中定義，它們在Vue定義中具有其自己的部分。此外，您應該使用this來引用計算中的數據屬性。

如果我理解正確的問題，這應該適用於排序和篩選。

console.clear() 
 
var vm = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    activeSet: 'all', 
 

 
    songs: { 
 
     a: { 
 
     title: 'Hound Dog', 
 
     all: 0, 
 
     set1: 2 
 
     }, 
 
     b: { 
 
     title: 'Long Gone', 
 
     all: 3, 
 
     set1: 0 
 
     }, 
 
     c: { 
 
     title: 'Novermber Rain', 
 
     all: 2, 
 
     set1: 3 
 
     } 
 
    }, 
 
    sets: { 
 
     all: { 
 
     name: 'All Songs' 
 
     }, 
 
     set1: { 
 
     name: 'Acoustic' 
 
     } 
 
    } 
 
    }, 
 
    computed: { 
 
     activeContents(){ 
 
     // setup 
 
     let set = this.activeSet 
 
     let filter = k => this.songs[k][set] > 0 
 
     let sorter = (a,b) => this.songs[a][set] - this.songs[b][set] 
 
     
 
     // filter and sort 
 
     let selectedKeys = Object.keys(this.songs) 
 
      .filter(filter) 
 
      .sort(sorter) 
 
     
 
     // build new object 
 
     return selectedKeys.reduce((acc, k) => { 
 
      acc[k] = this.songs[k] 
 
      return acc 
 
     }, {}) 
 
     } 
 
    }, 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 
<div id="app"> 
 
    <select v-model="activeSet"> 
 
    <option v-for="(set,key) in sets" :value="key">{{set.name}}</option> 
 
    </select> 
 
    <ul id="menu"> 
 
    <li v-for="(song,key) in activeContents" :id="key" :is-active="song.show" :key="key" @click="activeSong=key">{{ song.title }}</li> 
 
    </ul> 
 
</div>