Vuejs P206

by SatoshiSuzuki

HTML

<div id="app">
  <script type="”text/javascript”" src="”http://underscorejs.org/underscore-min.js”"></script>
  <button @click="order=!order">切り替え</button>
  <transaction-group tag="ul" class="list">
    <li v-for="item in sortedList" v-bind:key="item.id">
      {{item.name}} {{item.price}}円
    </li>
  </transaction-group>
</div>

JavaScript

new Vue({
  el: "#app",
  data: {
    order: false,
    list: [{
        id: 1,
        name: "apple",
        price: 100
      },
      {
        id: 2,
        name: "banana",
        price: 200
      },
      {
        id: 3,
        name: "cherry",
        price: 300
      },
    ]
  },
  computed: {
    sortedList: function() {
      return _.orderBy(this.list, "price", this.order ? "desc" : "asc")
    }
  }
})