简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Vue JS의 배열을 기반으로 슬롯 필드를 동적으로 추가/제거하는 방법
P粉639667504
P粉639667504 2023-08-28 17:43:21
0
1
483
<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>
P粉639667504
P粉639667504

모든 응답(1)
P粉463824410
P粉4638244102023-08-29 12:59:04 1층

당신의 v-for 循环元素添加一个独特的 key가치를:

으아악

이렇게 하면 DOM에서 요소가 올바르게 제거됩니다.

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！