Vue.jsで配列を元にv-forでレンダリングした要素の削除時の挙動について

Question

前提・実現したいこと

Vue.jsを使って、楽譜を読む練習をするツールを作成しようとしています。
まずは、音符を作成する処理と、音符を削除する処理を作成しました。

https://jsfiddle.net/ichi3270/97k63zew/16/

現時点では、ADDボタンを押したら音符が作られ、DELETEボタンを押したら先頭の音符が削除されるようにしています。

発生している問題・エラーメッセージ

想定どおり、音符の作成と音符の削除ができているのですが、
複数の音符が画面上に表示されている場合に、DELETEボタンで先頭の音符を削除すると、うしろにある音符の位置が変わってしまい困っています。（ガクッと前進してしまう）
（上記 jsfiddle で、ADDボタンを数回押す → DELETEボタンを押す をするとご確認いただけます）

該当のソースコード

<template v-for="item in notes">
    <li class="note-wrap" v-show="item.show" v-bind:style="item.styles" v-bind:ref="item.refId">
        <div class="sign">{{ item.sign }}</div>
        <div class="note"></div>
    </li>
</template>

.note-wrap {
    animation-name: moveNotes;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

@keyframes moveNotes {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-15px);
    }
}

var app = new Vue({
    el: '#app',
    data: {
        noteId: 0,                      // 次生成するnoteのID
        notes: [],                      // noteデータ配列
    },
    methods: {
        // *** ノート生成処理 ***
        createNote: function () {
            // ランダムで音程を決定
            const pitch = Math.floor(Math.random() * (45 + 1))
            let sign = "";
            // 臨時記号を算出
            switch (pitch % 12) {
                case 2:
                case 4:
                case 6:
                case 9:
                case 11:
                    sign = "♯"
            }
            const offsetMap = [0, 7.5, 7.5, 15, 15, 22.5, 22.5, 30, 37.5, 37.5, 45, 45]         // (E → D#)半音毎の譜面上の上昇px数
            const offsetTop = 195 - (Math.floor(pitch / 12) * 52.5) - offsetMap[(pitch % 12)]   // 譜面最上部からのY位置を算出
            // 作成処理
            this.notes.push({
                id: this.noteId,                    // NoteのID
                refId: `Note_${this.noteId}`,       // Dom直接参照用のID
                show: true,                         // true:存在 false:削除済
                pitch: pitch,                       // 音程
                sign: sign,                         // 臨時記号♯♭
                styles: { top: `${offsetTop}px` }   // css(譜面上辺からの縦距離)
            })
                
            // idカウントアップ
            this.noteId += 1
        },
        
        // *** ノート削除処理 ***
        removeNote: function () {
            this.notes.splice(0,1);
        },
    }
})

試したこと

音符削除処理のremoveNoteについて、配列の要素削除ではなく、配列の作り直し（下記）も試してみましたが、結果は同じでした。

// 試したが結果は変わらず
this.notes = this.notes.filter(item => item.id !== noteId)

要素を削除せずに、論理削除（v-showで非表示にする）であれば、スムーズに描画されますが、データが削除されずに増えていくのはあまり希望どおりではありません。

this.notes.find(item => item.id === noteId ).show = false

論理削除ではない方法で、解決できる方法がありましたらご教示いただけますと幸いです。
宜しくお願いいたします。

Answer 1

templateでkey使えないって怒られるので

<template>部分だけ抜粋

          <template>
            <li class="note-wrap" v-for="item in notes" :key="item.id" v-show="item.show" v-bind:style="item.styles" v-bind:ref="item.refId">
              <div class="sign">{{ item.sign }}</div>
              <div class="note"></div>
            </li>
          </template>

でいかがでしょう。

Comments

[ichitamu]

早速のご回答ありがとうございました！いただいたご提案で解決いたしました。
:key についてご教示いただいたおかげで、作成中の他の部分で表示がズレるものも解決できました。