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。

Answer 2

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

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 来对项进行操作

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

2 个答案: