I have a list of filters using checkboxes. I'm trying to make each checkbox it's own ponents. So I loop through my list of filters adding a checkbox ponent for each filter. The Vue.js documentation says that if I have multiple checkboxes that use the same model that array will get updated with the value of the checkboxes. I see that working if the group of checkboxes is part of the parent ponent. But if I make the checkbox a ponent and add each checkbox ponent in a loop then the model doesn't update as expected.

How can I have a checkbox ponent that updates an array on the parent? I know I can do this with emitting an event for a method on the ponent that updates the array but the Vue documentation makes it seems like the framework does this for you.

Here is a code sample I've been playing around with

I have a list of filters using checkboxes. I'm trying to make each checkbox it's own ponents. So I loop through my list of filters adding a checkbox ponent for each filter. The Vue.js documentation says that if I have multiple checkboxes that use the same model that array will get updated with the value of the checkboxes. I see that working if the group of checkboxes is part of the parent ponent. But if I make the checkbox a ponent and add each checkbox ponent in a loop then the model doesn't update as expected.

How can I have a checkbox ponent that updates an array on the parent? I know I can do this with emitting an event for a method on the ponent that updates the array but the Vue documentation makes it seems like the framework does this for you.

Here is a code sample I've been playing around with https://www.webpackbin./bins/-KwGZ5eSofU5IojAbqU3

• javascript
• vuejs2
• vue-ponent

Share Improve this question Follow edited Jul 14, 2022 at 4:12 tony19 139k2323 gold badges278278 silver badges348348 bronze badges asked Oct 12, 2017 at 17:48 Michael TurnwallMichael Turnwall 67199 silver badges2121 bronze badges 1

• 2 Please include relevant code in the post itself, not just a link to it. – thanksd Commented Oct 12, 2017 at 17:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Here is a working version.

<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"
    },
    puted:{
      internalValue: {
        get(){return this.checked},
        set(v){this.$emit("input", v) }
      }
    }
  }
</script>

Updated bin.

The answer given by @Bert is right. I just want to plete the picture with the list of ponents and how thay are integrated. As this is a useful pattern.

Also including Select All functionality

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'],

        puted:{
            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: []
            }
        },


       puted: {
           // 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 = [];
                    }
                }
            }
       },


        ponents: {
            ListItem
        }
  }
</script>

Once boxes get checked we have in checked the list of IDS [1, 5] which we can use to do operation on the items with those IDs