Vue.js 체크박스 컴포넌트 여러 개

Vue.js 체크박스 컴포넌트 여러 개

체크박스를 사용하는 필터 목록이 있습니다.각 체크박스를 자체 컴포넌트로 만들려고 합니다.필터 목록을 루프하여 각 필터에 대한 체크박스 구성 요소를 추가합니다.Vue.js 문서에는 동일한 모델을 사용하는 체크박스가 여러 개 있는 경우 해당 체크박스의 값으로 어레이가 갱신된다고 나와 있습니다.체크박스 그룹이 부모 컴포넌트의 일부일 경우 동작하는 것을 알 수 있습니다.그러나 체크박스를 컴포넌트로 만들고 각 체크박스 컴포넌트를 루프에 추가하면 모델이 예상대로 업데이트되지 않습니다.

부모 어레이를 갱신하는 체크박스 컴포넌트를 사용하는 방법어레이를 업데이트하는 컴포넌트의 메서드에 대한 이벤트를 내보내면 이 작업을 수행할 수 있지만 Vue 매뉴얼에서는 프레임워크가 이 작업을 수행하는 것처럼 보입니다.

다음은 제가 https://www.webpackbin.com/bins/-KwGZ5eSofU5IojAbqU3과 함께 플레이하고 있는 코드 샘플입니다.

다음은 작동 버전입니다.

<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을 갱신했습니다.

@Bert의 대답이 맞다.컴포넌트 리스트와 통합 방법을 그림으로 완성하고 싶을 뿐입니다.이것은 유용한 패턴이기 때문에.

Select All 기능 포함

리스트 아이템표시하다

<template>
    <div class="item">
        <input type="checkbox" v-model="internalChecked" :value="item.id" />

        ... other stuff
    </div>
</template>



<script>
    export default {
        // Through this we get the initial state (or if the parent changes the state)
        props: ['value'],

        computed:{
            internalChecked: {
                get() { return this.value; },

                // We let the parent know if it is checked or not, by sending the ID
                set(selectedId) { this.$emit("input", selectedId) }
            }
        }
  }
</script>

List.vue

<template>
    <div class="list">
        <label><input type="checkbox" v-model="checkedAll" /> All</label>

        <list-item
            v-for="item in items"
            v-bind:key="item.id"

            v-bind:item="item"
            v-model="checked"
        </list-item>

        ... other stuff
    </div>
</template>



<script>
    import ListItem from './ListItem';


    export default {
        data: function() {
            return: {
                // The list of items we need to do operation on
                items: [],

                // The list of IDs of checked items
                areChecked: []
            }
        },


       computed: {
           // Boolean for checked all items functionality
           checkedAll: {
                get: function() {
                    return this.items.length === this.areChecked.length;
                },

                set: function(value) {
                    if (value) {
                        // We've checked the All checkbox
                        // Starting with an empty list
                        this.areChecked = [];
                        // Adding all the items IDs
                        this.invoices.forEach(item => { this.areChecked.push(item.id); });

                    } else {
                        // We've unchecked the All checkbox
                        this.areChecked = [];
                    }
                }
            }
       },


        components: {
            ListItem
        }
  }
</script>

박스가 체크되면 IDS 목록을 체크합니다.[1, 5]이 ID를 가진 아이템을 조작하는 데 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/46715924/vue-js-checkbox-component-multiple-instances