Vue.js 확인란 구성 요소 여러 인스턴스

Question

확인란 목록을 사용하는 필터 목록이 있습니다. 각 확인란을 자체 구성 요소로 만들려고합니다. 따라서 각 필터에 대한 확인란 구성 요소를 추가하는 필터 목록을 반복합니다. Vue.js documentation은 동일한 모델을 사용하는 여러 확인란을 사용하는 경우 해당 배열이 확인란의 값으로 업데이트 될 것이라고 말합니다. 확인란 그룹이 부모 구성 요소의 일부인 경우 해당 작업을 볼 수 있습니다. 그러나 확인란을 구성 요소로 만들고 각 확인란 구성 요소를 루프에 추가하면 모델이 예상대로 업데이트되지 않습니다.

부모의 배열을 업데이트하는 확인란 구성 요소를 어떻게 가질 수 있습니까? 배열을 업데이트하는 구성 요소의 메서드에 이벤트를 발생 시키면이 작업을 수행 할 수 있지만 Vue 설명서를 보면 프레임 워크에서이 작업을 수행하는 것처럼 보일 수 있습니다.

여기 여기에 작업 버전 내가 https://www.webpackbin.com/bins/-KwGZ5eSofU5IojAbqU3

Answer 1

주변에 연주 한 코드 샘플입니다.

<template> 
    <div class="filter-wrapper"> 
    <input type="checkbox" v-model="internalValue" :value="value"> 
    <label>{{label}}</label> 
    </div> 
</template> 

<script> 
    export default { 
    props: ['checked','value', 'label'], 
    model: { 
     prop: "checked" 
    }, 
    computed:{ 
     internalValue: { 
     get(){return this.checked}, 
     set(v){this.$emit("input", v) } 
     } 
    } 
    } 
</script> 

업데이트 bin.