선택한 값의 배열에 바인딩된 Vue 3 사용자 정의 확인란 구성 요소

Question

저는 스타일이 지정된 체크박스와 해당 라벨을 사용하여 간단한 구성 요소를 만들려고 노력해 왔습니다. 선택된 모든 체크박스의 값(문자열)은 배열로 저장되어야 합니다. 이는 일반 HTML 체크박스에 적용됩니다:

으아악

다음과 같은 원하는 상황으로 이어집니다.

이제 이 확인란을 사용자 정의 확인란 구성 요소로 바꾸면 작동하지 않습니다. 확인란을 선택하면 방출되는 값이 status 배열에 추가되거나 제거되는 대신

배열을 대체하는 것처럼 보이며 결과는 다음과 같습니다.

status 值会转到 false ，再次单击任何一个复选框将选中所有复选框并使 status true어떤 이유에서든 모든 체크박스는 기본적으로 선택되어 있으며 그 중 하나를 클릭하면 모두 선택 해제되고

값은 false가 됩니다. 체크박스를 다시 클릭하면 모든 체크박스가 선택되고 < 코드 >상태 참.

이제 상자가 선택되었는지 여부에 따라 방출을 반환하면 true 또는 false 값이 반환된다는 것을 알고 있지만 Vue가 기본 확인란을 사용하여 이 작업을 수행하는 방법과 내 구성 요소에서 이 동작을 구현하는 방법을 이해하지 못합니다.

내 체크박스 구성요소의 코드는 다음과 같습니다.

으아악

그리고 상위 구성 요소는 다른 템플릿을 사용합니다.

으아악

StevenSiebert의 답변을 보려고 했지만 객체를 사용하고 기본 체크박스를 사용하여 원래 Vue 동작을 복제하고 싶습니다.

v-model또한

의 공식 Vue 문서를 참조했지만 이것이 구성 요소의 경우와 기본 확인란의 경우 다르게 작동하는 이유를 이해하지 못합니다. 🎜

Answer 1

각 체크박스의 v-model은 동일하며 아마도 다음 코드 조각과 유사할 것입니다.

으아악 으아악