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，则需要包含该值，然后按该值排序。如果您可以按大于0的那些值排序，我甚至没有潜入排序等奖励积分。

Answer 1

计算属性未在rootPage.Detail中定义，它们在Vue定义中有自己的部分。此外，您应该使用data来引用计算内的数据属性。

如果我理解正确，这应该适用于排序和过滤。

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
         }, {})
      }
    },
})

Vue.js过滤列表

1 个答案: