Javascript Vue.js复选框组件多个实例

我有一个使用复选框的过滤器列表。我试图使每个复选框都成为自己的组件。因此，我在过滤器列表中循环，为每个过滤器添加一个复选框组件。表示如果我有多个使用同一模型的复选框，那么数组将使用复选框的值进行更新。如果复选框组是父组件的一部分，我会看到这一点。但是，如果我将复选框设置为一个组件，并将每个复选框组件添加到一个循环中，那么模型不会按照预期进行更新

如何让复选框组件更新父节点上的数组？我知道我可以通过为更新阵列的组件上的方法发出事件来实现这一点，但Vue文档似乎让框架为您实现了这一点

---

这是我一直在玩的一个代码示例

这是一个工作版本

<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>

{{label}}
导出默认值{
道具：['checked'，'value'，'label']，
型号：{
道具：“已检查”
},
计算：{
内部价值：{
get（）{返回这个。选中}，
set（v）{this.$emit（“input”，v）}
}
}
}

---

更新。

由@Bert给出的答案是正确的。我只想用组件列表和它们的集成方式来完成这张图片。因为这是一个有用的模式

还包括全选功能

ListItem.vue

<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>

... 其他东西
导出默认值{
//通过这个，我们得到初始状态（或者如果父级更改了状态）
道具：['value']，
计算：{
内部检查：{
get（）{返回this.value；}，
//我们通过发送ID让家长知道是否检查了它
set（selectedId）{this.$emit（“input”，selectedId）}
}
}
}

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>

全部的
请在帖子中包含相关代码，而不仅仅是链接。太棒了，谢谢你。请让我知道，如果我了解这是如何工作的。您正在为组件创建内部模型，并将其值设置为从父级传入的模型。我理解对了吗？@MichaelTurnwall你明白了。当内部模型发生更改时，更改将发送给父级。谢谢您，我相信您的列表。vue在您已检查
的位置
应该检查
。除此之外，这一切都非常有效。