Vue JS의 배열을 기반으로 슬롯 필드를 동적으로 추가/제거하는 방법
P粉639667504
2023-08-28 17:43:21
<p>반복할 HTML 필드가 포함된 슬롯을 허용하는 다음 코드가 있습니다. </p>
<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-1차 파도-효과 파도-플로트 파도-빛 높이-10-per >
<i class="fa fa-times-circle"></i> 삭제
</버튼>
</div>
<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(색인){
this.rows.splice(index, 1);
},
추가행(){
this.rows.push({값: '테스트'})
}</pre>
<p>어떤 도움이라도 대단히 감사하겠습니다. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
당신의
으아악v-for循环元素添加一个独特的key가치를:이렇게 하면 DOM에서 요소가 올바르게 제거됩니다.