Vue.js filter a list

Question

I am new to Vue.js. I'm trying to display a filtered list based on the value of another object. The select sets the value of the object called activeSet. That value is the key in the sets object. If that keys value is greater than 0 I want to display it in the list and sort by it. Here is my code:

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>

Fiddle Here is the fiddle

Sidenote: If the value is above 0 it needs to be included and then sorted by that value. I haven't even dived into sorting yet so bonus points if you can sort by the value of those that are greater than 0.

Answer 1

Computed properties are not defined in data, they have their own section in the Vue definition. Additionally, you should use this to reference data properties inside the computed.

If I understand the question correctly, this should work for sorting and filtering.

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>