Linking a group of child checkboxes to a single parent

Question

Linking a group of child checkboxes to a single parent

Is there a way to link multiple checkboxes from various child elements to one parent element (e.g. using a model)?

Imagine that each child component includes something like:

<input
  type="checkbox"
  :id="'ticket-'+id"
  :checked="checked"
/>

Now, can we have a parent property called selected that would gather the ids of all checked checkboxes from the children in an array?

{
  selected: [
    5,
    8
  ]
}

The closest solution I found is this. However, I don't want to track unchecked instances in my case.

javascript typescript vue.js vue-component

Answer 1

Answer №1

To handle the checkbox change events on the parent and update the data model, you can create a method.

Take a look at the code snippet below for an example of how this can be implemented: (View in full screen for better visibility)

new Vue({
  el: "#app",
  data: {
    list: [
    { id: 1, label: 'Check 1'},
    { id: 2, label: 'Check 2'},
    { id: 3, label: 'Check 3'},
    { id: 4, label: 'Check 4'},
    ],
    selected: []
  },
  methods: {
    handleChange: function(ev) {
      let id = ev.target.id;
        if (ev.target.checked) {
        if (!this.selected.includes(id)) {
            this.selected.push(id);
        }
      } else {
        this.selected = this.selected.filter(function (item) {
            return item !== id;
        });
      }
      
      console.log('Updated: ', this.selected);
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app">
  <ol @change="handleChange">
    <li v-for="check in list">
      <label>
        <input type="checkbox" :id="check.id" />
        <span>{{check.label}}</span>
      </label>
    </li>
  </ol>
</div>

Answer 2

To handle the checkbox change events on the parent and update the data model, you can create a method.

Take a look at the code snippet below for an example of how this can be implemented: (View in full screen for better visibility)

new Vue({
  el: "#app",
  data: {
    list: [
    { id: 1, label: 'Check 1'},
    { id: 2, label: 'Check 2'},
    { id: 3, label: 'Check 3'},
    { id: 4, label: 'Check 4'},
    ],
    selected: []
  },
  methods: {
    handleChange: function(ev) {
      let id = ev.target.id;
        if (ev.target.checked) {
        if (!this.selected.includes(id)) {
            this.selected.push(id);
        }
      } else {
        this.selected = this.selected.filter(function (item) {
            return item !== id;
        });
      }
      
      console.log('Updated: ', this.selected);
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app">
  <ol @change="handleChange">
    <li v-for="check in list">
      <label>
        <input type="checkbox" :id="check.id" />
        <span>{{check.label}}</span>
      </label>
    </li>
  </ol>
</div>

Linking a group of child checkboxes to a single parent

Answer №1

Similar questions

Troubleshooting the defects in the string-to-json module functionality

Tips for moving a polygon while dragging a marker within its boundaries

What is the reason for the index type being defined twice?

Creating a method that can adopt the return type of the nested function?

Troubleshooting the Checkbox Oncheck Functionality

What are the steps for launching a node.js application within vert.x?

What steps should I take to incorporate a timer into my bot similar to the timer used by other giveaway bots

The type 'MouseEvent<HTMLButtonElement, MouseEvent>' cannot be matched with the type 'boolean'

Issue with handling 'this' in submit function in Sencha touch/JavaScript not resolved

How to format a Date object as yyyy-MM-dd when serializing to JSON in Angular?

What is the best way to refresh NGRX data?

"Utilize Vue i18n to properly display currency amounts in USD

What are some ways I can extract a value using Vue.js?

How can I utilize a variable in a v-for loop as a label for a q-btn in Vue.js?

Collaborating and monitoring data between controllers

Is the "mocha" command line tool requires quotation marks for specifying test files?

Ways to stop grabber applications from identifying and saving mp3 files directly from the web browser

Exploring TypeScript: TS2349 - The function you are trying to call is not callable. The type 'never' does not have any call signatures

Compilation of various route parameters

Looping Angular Components are executed