Vue JS の配列に基づいてスロット フィールドを動的に追加/削除する方法
P粉639667504
P粉639667504 2023-08-28 17:43:21
0
1
512
<p>次のコードがあります。これは、繰り返される HTML フィールドを含むスロットを受け入れます。 <pre class="brush:php;toolbar:false;"><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></pre> <p><code>removeRow(index)</code> を使用すると、常に最後のスロットが削除されます。 <code><input v-model="row.value"></code> を使用してテストしたところ、正しい入力は削除されましたが、正しいスロットは削除されませんでした。 </p> <p>スロットへの入力を動的にしたり、Vue と対話したりする必要はありません。ユーザーが Vue コンポーネントを介して行を動的に追加/削除できるようにしたいだけです。 </p> <p>問題が発生した場合に備えて、以下の行の追加/削除に使用する 2 つの方法を参照してください。 <pre class="brush:php;toolbar:false;">removeRow(index){ this.rows.splice(インデックス, 1); }、 行を追加する(){ this.rows.push({値: 'テスト'}) }</pre> <p>ご協力をよろしくお願いいたします。 </p>
P粉639667504
P粉639667504

全員に返信(1)
P粉463824410

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

リーリー

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート