Vue.js ランキング機能を実装したい いいね順の表示

Question

初めてvueを触るので、初歩的なミスでしたら申し訳ないです。

いいね順（降順）に表示されるランキングの表の様なものを作成したいです。

<template>
  <div>
    <h3>何かタイトル</h3>
    <table>
      <thead>
      <tr>
      <th>No.</th>
      <th>いいね数</th>
      <th>画像</th>
      <th>名前</th>
      <th>情報</th>
      <th>種類</th>
      </tr>
      </thead>
        <tbody>
          <tr v-for="item in items" :key="item.no">
            <td>{{ item.no }}</td>
            <td>{{ item.like }}</td>
            <td><img :src='item.img' width="80px"></td>
            <td>{{ item.name }}</td>
            <td>{{ item.info }}</td>
            <td><img :src='item.kind' width="40px"></td>
            <button :disabled="isPush" @click="item.like ++; isPush = true;">投票</button>
          </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      items: [
        { 
          no:1,
          like: 7 ,　//ここの数字のランキング機能を作りたい
          img:require('@/assets/images/items/hogehoge.png'),  
          name:'foo',    
          info:'aaa',
          kind:require('@/assets/images/aaa/bbb.png')
          },//以上の様な物が下に続く
      ],
      isPush: false, //二回以上押せない様にしている
    }
  },
  computed: {
    sortedItems(){
      return this.items.slice().sort((a, b) => {
      if(a[this.like] < b[this.like]) return -1
      if(a[this.like] > b[this.like]) return 1
      return 0
      });
    }
}
}
</script>

問題だと思うところのみ載せます。　
これでは、いいね順に表示されないです。
いいね順（降順）に表示される様な方法をご教授いただけると幸いです。

Answer 1

sortedItems が呼ばれてません。

<tr v-for="item in items" :key="item.no">
を
<tr v-for="item in sortedItems" :key="item.no">
に変更します。

また、sortedItems内のthis.likeが何を参照しているのか分かりません。
たぶん以下のようにします。

sortedItems(){
   return this.items.slice().sort((a, b) => {
      if(a.like > b.like) return -1
      if(a.like < b.like) return 1
      return 0
   });
}

参考
https://jsfiddle.net/nb4kc6xu/

Comments

[storyteller]

意図した挙動になりました！！
とても嬉しく思います。ありがとうございます！