参考コード

  • computed を使うことで、元の members を並び変えるのではなく、新たに sortedMembers という値を定義し並び変えることができる
  • 並び変えるためのライブラリとして lodash.sortby を使用する
  • v-for で members ではなく sortedMembers を使用する
App.vue
<template>
  <div>
    <Member
      :changeHeight="changeHeight"
      :key="member.id"
      v-for="member in sortedMembers"
      :member="member"
    >{{member.name}}</Member>
  </div>
</template>

<script>
import Member from "./components/Member";
import _sortBy from "lodash.sortby";
export default {
  name: "App",
  components: {
    Member
  },
  data() {
    return {
      members: [
        { name: "中西", position: "ガード", id: 1, height: 163 },
        { name: "佐々木", position: "フォワード", id: 2, height: 173 },
        { name: "渡辺", position: "センター", id: 3, height: 180 },
        { name: "城所", position: "パワーフォワード", id: 4, height: 176 },
        { name: "荒瀬", position: "シューティングガード", id: 5, height: 168 }
      ]
    };
  },
  computed: {
    sortedMembers() {
      const members = this.members
      return _sortBy(members, 'height').reverse();
    }
  },
  methods: {
    changeHeight(id, value) {
      const members = this.members;
      this.members = members.map(member => {
        if (id === member.id) {
          return { ...member, height: member.height + value };
        }
        return member;
      });
    }
  }
};
</script>

<style>
</style>