루프를 사용하여 Vue.js의 모든 요소를 ​​표시할 때 요소 중 하나를 숨기고 싶지만 모든 요소가 숨겨져 있습니다.

Question

첫 번째 사진이므로 "편집"을 클릭할 필요가 없습니다

"편집"을 클릭하면 두 번째 사진

여기에서 편집 버튼을 클릭하면 루프의 모든 작업과 해당 작업이 포함된 섹션이 숨겨집니다. 그렇지 않으면 섹션이 표시되지만 편집 버튼을 클릭하면 특정 작업을 숨기고 싶습니다. 누구든지 나를 도와줄 수 있나요?

으아악 으아악

Answer 1

관찰: isEditing 是代码中的罪魁祸首。因为 isEditing 是一个包含 boolean 값에 대한 전역 변수입니다. 따라서 편집할 때 모든 작업에 영향을 미치는 isEditing 값을 업데이트합니다.

해결책: isEditing을 전역적으로 정의하는 대신 작업 배열의 각 개체에 isEditing을 추가할 수 있습니다. 이렇게 하면 모든 작업을 업데이트하는 대신 클릭한 작업의 값만 업데이트할 수 있습니다.

템플릿 코드는 :

입니다. 으아악

대신

으아악

Answer 2

부울 대신 인덱스를 사용하여 isEditing:

으아아아 으아아아