Vue JS中如何根据数组动态添加/删除插槽字段
P粉639667504
2023-08-28 17:43:21
<p>我有以下代码，它接受一个包含要重复的HTML字段的插槽：</p>
<pre class="brush:php;toolbar:false;"><div v-for="(row, index) in rows" :key="index">
<div class="d-flex justify-content-between ">
<slot name="fields">
</slot>
<input v-model="row.value" />
<button @click="removeRow(index)" type="button" class="btn btn-primary waves-effect waves-float waves-light height-10-per " >
Remove <i class="fa fa-times-circle"></i>
</button>
</div>
</div></pre>
<p>当我使用<code>removeRow(index)</code>时，它总是移除最后一个插槽。我已经测试了使用<code><input v-model="row.value"></code>，正确的输入在这里被移除了，但从未移除正确的插槽。</p>
<p>我不需要插槽中的输入是动态的或与Vue交互，我只是想允许用户通过Vue组件动态添加/删除行。</p>
<p>请查看我用于添加/删除行的下面两种方法，以防问题出在这里：</p>
<pre class="brush:php;toolbar:false;">removeRow(index){
this.rows.splice(index, 1);
},
addRow(){
this.rows.push({value: 'test'})
}</pre>
<p>非常感谢任何帮助。</p>
为您的
v-for循环元素添加一个独特的key值：这样可以确保从 DOM 中正确地移除元素。