vue.js 2.x その0002 v-forで表示しているリストの並べ替え

参考にさせていただいたページ

sortについて

• JavaScript つい忘れてしまう配列のソート方法 - Qiita

v-forについて

• リストレンダリング - Vue.js

ソースコードサンプル

すごく適当にデータを用意して、以下のように書いてみました。

<div id="sort-app">
  <h1>Vue.jsの練習 静的なページ</h1>
  <nav>
    <div><button v-on:click="sort('id')">id順に並べ替え</a></button>
    <div><button v-on:click="sort('rice_and_bread')">ごはんとパンの合計価格順に並べ替え</a></button>
    <div><button v-on:click="sort('rice_only')">ごはんの価格順に並べ替え</button></div>
    <div><button v-on:click="sort('bread_only')">パンの価格順に並べ替え</button></div>
  </nav>
  <ul>
    <li v-for="item in state.items">
      【{{item.name}}】 id:{{item.id}} 合計額：{{item.priceRiceAndBread}}円 ごはん:{{item.priceRice}}円 パン:{{item.priceBread}}円
    </li>
  </ul>
<!--/#sort-app--></div>

<script src="js/vue.js"></script>
<script>
  var sortApp = new Vue({
    el: '#sort-app',
    data: {
      state: {
        items: [
          {name: 'セット商品0', id: 0, priceRiceAndBread: 410, priceRice: 110, priceBread: 300},
          {name: 'セット商品1', id: 1, priceRiceAndBread: 550, priceRice: 350, priceBread: 210},
          {name: 'セット商品2', id: 2, priceRiceAndBread: 380, priceRice: 180, priceBread: 200},
          {name: 'セット商品3', id: 3, priceRiceAndBread: 610, priceRice: 200, priceBread: 410},
          {name: 'セット商品4', id: 4, priceRiceAndBread: 440, priceRice: 320, priceBread: 120},
        ],
      },
    },
    methods: {
      sort: function(action_type){
        switch (action_type) {
          case 'id':
            this.state.items.sort(function(a,b){
              if(a.id < b.id) return -1;
              if(a.id > b.id) return 1;
              return 0;
            });
            break;
          case 'rice_and_bread':
            this.state.items.sort(function(a,b){
              if(a.priceRiceAndBread < b.priceRiceAndBread) return -1;
              if(a.priceRiceAndBread > b.priceRiceAndBread) return 1;
              return 0;
            });
            break;
          case 'rice_only':
            this.state.items.sort(function(a,b){
              if(a.priceRice < b.priceRice) return -1;
              if(a.priceRice > b.priceRice) return 1;
              return 0;
            });
            break;
          case 'bread_only':
            this.state.items.sort(function(a,b){
              if(a.priceBread < b.priceBread) return -1;
              if(a.priceBread > b.priceBread) return 1;
              return 0;
            });
            break;
          default:
        };
      },
    },
  });
</script>