Vue 사용자 정의 확인란 구성 요소를 만드는 올바른 방법

Question

Vue에서 사용자 정의 체크박스를 만드는 방법. 확인란이 변경되면 함수를 호출해야 합니다. "정의되지 않은 'id' 속성을 읽을 수 없습니다." 오류가 발생했습니다. 그리고 "네이티브 이벤트 핸들러를 실행하는 동안 처리되지 않은 오류가 발생했습니다"라는 경고

맞춤형 확인란:

<템플릿>
  <div class="필터">
    <입력
        :ref="아이디"
        :id="아이디"
        유형="체크박스"
        클래스="필터-체크박스"
        @change="$emit('do', $emit)"
    />
    <span>{{ 라벨 }}</span>
  </div>
</템플릿>

<스크립트>
기본값 내보내기 {
  이름: "체크박스",
  소품: {
    라벨: {
      유형: 문자열
    },
    선택됨: {
      유형: 부울
    },
    ID: {
      유형: 문자열
    }
  },
}



<p>부모 구성요소에서 이것을 사용하고 싶습니다:</p>
<p>

<pre class="brush:js;toolbar:false;"><체크박스
   v-for="필터의 필터"
   :key="필터.id"
   :label="필터.이름"
   :id="필터.id"
   v-model="filter.selected"
   @do="상호배타적(filter.id)"
//>

Answer 1

정의되지 않고 처리되지 않은 오류는 반복될 수 없으며 추가로 디버깅해야 합니다.

하지만 내보내기 기능을 내보내고 있는데, 이상하네요. 값은 확인 여부에 관계없이 항상 filter.id입니다.

다음과 같은 작업을 수행할 수 있습니다.

으아악 으아악