はじめに

現在vue.jsにてtodoアプリを作成しており、v-forの順序を逆順にした際に起きた現象と注意点と対策を備忘録としてあげたいと思います。

htmlの部分

App.vue

  computed: {
    // todoを逆順にしておく
    reversTodos() {
      return this.todos.slice().reverse();
    }
  }

App.vue

<transition-group name="slide" tag="ul" class="todo-list">
  <li v-for="(todo, index) in reversTodos" :key="todo.id">
    <p class="data">Posted date：{{todo.today}}</p>
    <p class="deadline" :class="{hurry: todo.isDone}">dead-line：{{todo.deadline}}</p>

    <div class="change-btns">
      <span class="edit" @click="editForm(index)">edit</span>
      <span class="delete" @click="deleteItem(index)">delete</span>
    </div>
    <p class="title">
      <label class="text">
        <input type="checkbox" class="check" v-model="todo.isDone" />
        <span :class="{done: todo.isDone}">{{todo.title}}</span>
      </label>
    </p>
    <p class="content">{{todo.content}}</p>
  </li>
</transition-group>

その後に削除処理を実施。

App.vue

  methods: {
    // todoの削除
    deleteItem(index) {
      confirm("delete ok?") ? this.todos.splice(index, 1) : true;
    }
  }

上記のように表示をさせて削除処理を進めていると問題が起きました。
リストの要素を削除すると別の要素が削除されてしまいました。
落ち着いて考えると分かるのですがcomputedで定義したreversTodosとdataのtodosとで順番が異なってしまったことが原因です。

解決案①

App.vue

<transition-group name="slide" tag="ul" class="todo-list">
                       //indexの引数を使わない
  <li v-for="todo in reversTodos" :key="todo.id">
    <p class="data">Posted date：{{todo.today}}</p>
    <p class="deadline" :class="{hurry: todo.isDone}">dead-line：{{todo.deadline}}</p>

    <div class="change-btns">
                       //indexでなくtodoを引数に入れる
      <span class="edit" @click="editForm(todo)">edit</span>
      <span class="delete" @click="deleteItem(todo)">delete</span>
    </div>
    <p class="title">
      <label class="text">
        <input type="checkbox" class="check" v-model="todo.isDone" />
        <span :class="{done: todo.isDone}">{{todo.title}}</span>
      </label>
    </p>
    <p class="content">{{todo.content}}</p>
  </li>
</transition-group>

App.vue

  methods: {
    // todoの削除
    deleteItem(todo) {
      var index = this.todos.indexOf(todo)
      confirm("delete ok?") ? this.todos.splice(index, 1) : true;
    }
  }

あくまでもtodosの配列の順番をindexに入れるようにし、削除するようにしました。

解決案②

todoを作成する段階でpush()でなくunshift()を使う。

App.vue

    addItem() {
      if (this.newTitle == "" || this.newContent == "" || this.selected == "") {
        window.alert("Some items have not been entered.");
        return false;
      }
      var today = "";
      var item = {
        id: this.todos.length,
        today: this.calcDay(today),
        title: this.newTitle,
        content: this.newContent,
        selected: this.selected,
        deadline: this.calcDay(this.selected),
        isDone: false,
      }
　　　　//unshift（）に変更しました。
      this.todos.unshift(item);
      this.newTitle = this.newContent = this.selected = "";
    },

ただ逆にするだけであればこちらの方がシンプルに出来ますね。computedで値を定義する必要もなくなりましたし、他の編集機能を実施する際にもわざわざindexをとる必要もありません。

最後に

まだ僕も学習を始めたばかりでよくわかっていないかもですが、同じくvue.js初学者の参考になればいいと思います。