Vue JS の配列に基づいてスロット フィールドを動的に追加/削除する方法

Question

次のコードがあります。これは、繰り返される HTML フィールドを含むスロットを受け入れます。

<div v-for="(行, インデックス) 行内" :key="index">
      <div class="d-flex justify-content-between">
        <スロット名="フィールド">
        </スロット>
        <input v-model="row.value" />
        <button @click="removeRow(index)" type="button" class="btn btn-primary wave-effect wave-float wave-light height-10-per " >
          <i class="fa fa-times-circle"</i> を削除します。
        </ボタン>
      </div>
    </div>

removeRow(index) を使用すると、常に最後のスロットが削除されます。 を使用してテストしたところ、正しい入力は削除されましたが、正しいスロットは削除されませんでした。

スロットへの入力を動的にしたり、Vue と対話したりする必要はありません。ユーザーが Vue コンポーネントを介して行を動的に追加/削除できるようにしたいだけです。

問題が発生した場合に備えて、以下の行の追加/削除に使用する 2 つの方法を参照してください。

removeRow(index){
      this.rows.splice(インデックス, 1);
    }、
    行を追加する（）{
      this.rows.push({値: 'テスト'})
    }

ご協力をよろしくお願いいたします。

Answer 1

一意の key 値を v-for ループ要素に追加します:

リーリー

これにより、要素が DOM から正しく削除されます。