Vue2 filter example

using computed properties

by panamaprophet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">

  <div id="pan" class="pan">
    <div v-for="item in orderedList" >{{ item.id }}</div>
    <span class="pan__message">{{ message }}</span>
  </div>

  <br>
  
  Order by 

  <select v-model="sortKey">
    <option>id</option>
    <option>level</option>
    <option>name</option>
  </select>

</div>

CSS

.pan__message { text-transform: uppercase; }

JavaScript

var pan = new Vue({
  el: '#app',
  data() {
  	return {
    	list: [
      	{ name: '東京', id:"TOKYO",level: 2 },
      	{ name: '全国',id:"JAPAN",level: 1 },
      	{ name: '関東',id:"KANTO",level: 0 },
    	],
    	message:"hello",
      sortKey : 'level'
    }
  },
  computed : {
    orderedList(){ return this.list.sort(this.sorter) }
  },
   methods : {
     sorter(a,b){ return a[this.sortKey] > b[this.sortKey] }
   }
});