Javascript Vue.js筛选列表

我是Vue.js的新手。我正在尝试根据另一个对象的值显示筛选列表。

select

设置名为

activeSet

的对象的值。该值是

集合

对象中的键。如果keys值大于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>

{{set.name}

{{song.title}

小提琴

---

旁注：如果值大于0，则需要将其包括在内，然后按该值排序。我甚至还没有深入到排序中，因此如果您可以按大于0的值进行排序，则可以获得额外的点数。

计算属性未在

数据中定义，它们在Vue定义中有自己的部分。此外，您应该使用
this
来引用计算数据库中的数据属性

如果我正确理解了这个问题，这应该可以用于排序和筛选


console.clear（）
var vm=新的Vue({
el:“#应用程序”，
数据：{
activeSet:'所有'，
歌曲：{
a:{
标题：“猎犬”，
全部:0,，
set1:2
},
b:{
标题:"久违",，
全体:3,，
set1:0
},
c:{
标题：“十一月雨”，
全体:2,，
set1:3
}
},
设置：{
全部：{
名称：“所有歌曲”
},
set1：{
名称：“声学”
}
}
},
计算：{
activeContents（）{
//设置
设set=this.activeSet
让filter=k=>this.songs[k][set]>0
让分类器=（a，b）=>this.songs[a][set]-this.songs[b][set]
//筛选和排序
让selectedKeys=Object.keys（this.songs）
.过滤器（过滤器）
.分拣（分拣机）
//构建新对象
返回所选按键。减少（（acc，k）=>{
acc[k]=这首歌[k]
返回acc
}, {})
}
},
})

{{set.name}

{{song.title}

1）计算属性被定义为函数2）计算属性未在
数据
方法中定义3）当访问数据属性（例如
this.songs
）4）
歌曲
不是数组，因此它没有
过滤器
方法时，需要引用vue实例。我最后确实遇到了一个问题。我们筛选得到的对象返回为带有数字键的数组，而不是我们开始使用的对象。程序的其他部分依赖于键a、b、c等。是否有任何方法返回
歌曲
对象，就像它开始时一样（作为对象），但只是经过过滤？另一方面，我在实际项目中安装了lodash。我不确定这是否有帮助。我已经为此争论了好几天了，谢谢你的帮助。@TripleC更新了答案，我知道这是你的要求。如果你有问题，请告诉我。