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

Question

我有一个使用复选框的过滤器列表。 我正在尝试使每个复选框都成为自己的组件。 所以我遍历我的过滤器列表，为每个过滤器添加一个复选框组件。 Vue.js 文档说，如果我有多个使用相同模型的复选框，则数组将使用复选框的值进行更新。 如果复选框组是父组件的一部分，我看到它可以工作。 但是，如果我将复选框设为组件并在循环中添加每个复选框组件，则模型不会按预期更新。

我怎样才能有一个复选框组件来更新父级上的数组？ 我知道我可以通过为更新数组的组件上的方法发出一个事件来做到这一点，但是 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 。

Answer 2

@Bert 给出的答案是正确的。 我只想用组件列表以及如何集成来完成图片。 因为这是一个有用的模式。

还包括全选功能

列表项.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>

列表.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 的项目进行操作