Is there a way to gather selected checkboxes from all child checkbox components in vue?

Question

Is there a way to gather selected checkboxes from all child checkbox components in vue?

I have a unique setup where my table rows are generated by child components, each containing a checkbox. I am looking for a way to retrieve all the checked checkboxes at once without using two-way binding or updating an array on the parent component.

Here is a concise example of the template section:

<table>
    <thead>
        <tr>
            <th> Check </th>
            <th> Title </th>
        </tr>
    </thead>
    <list-tbody v-for="element in elements" :element="element"> </list-tbody>
</table>

And here is the child component snippet:

<tbody>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td> {{element.title}} </td>
    </tr>
</tbody>

javascript checkbox vue.js vuejs2

Answer 1

Answer №1

Two methods for handling this situation are suggested in the comments:

One option is to utilize Vuex and modify the elements array from the child component.
The other option involves emitting an event on each selection click event to the parent, allowing the parent to update the elements array.

The preference lies with the second method, as there is no utilization of Vuex, which is perfectly acceptable.

Once the data is "linked" between the child component and the parent, a filter method can be used to display only the selected elements.

Take a look at the provided demo below or the fiddle mentioned in the comment for more details.

const listTbodyVuex = {
props: ['element'],
template: `
  <tbody>
    <tr>
        <td>
            <input type="checkbox" @click="selected">
        </td>
        <td> {{element.title}} </td>
    </tr>
</tbody>
  `,
  methods: {
  ...Vuex.mapMutations(['changeSelection']),
  selected(evt) {
      this.changeSelection({
      id: this.element.id, selected: evt.target.checked
      });
    }
  }
}

const listTbodyEvents = {
props: ['element'],
template: `
  <tbody>
    <tr>
        <td>
            <input type="checkbox" @click="selected">
        </td>
        <td> {{element.title}} </td>
    </tr>
</tbody>
  `,
  methods: {
  selected(evt) {
    console.log('clicked', evt.target.checked)
      this.$emit('selected', {
      element: this.element,
        newSelection: evt.target.checked
      })
    }
  }
}

const store = new Vuex.Store({
state: {
  elements: [
      {
      id: 0,
      title: 'first',
        selected: false
      },
      {
      id: 1,
      title: 'second',
        selected: false
      },
      {
      id: 2,
      title: 'third',
        selected: false
      }
      ]
  },
  mutations: {
  changeSelection(state, {id, selected}) {
    let element = state.elements
      .filter((element) => element.id === id)[0];
      element.selected = selected;
      Vue.set(state.elements, element.id, element);
    }
  }
})

new Vue({
el: '#app',
  store,
  data() {
  return {
    elements: [
      {
      id: 0,
      title: 'first',
        selected: false
      },
      {
      id: 1,
      title: 'second',
        selected: false
      },
      {
      id: 2,
      title: 'third',
        selected: false
      }
      ]
    }
  },
  computed: {
  ...Vuex.mapState({
    vuexElements: (state) => state.elements
    })
  },
  components: {
  listTbodyEvents,
    listTbodyVuex
  },
  methods: {
  updateElement(data) {
    let element = this.elements
      .filter((element) => element.id === data.element.id)[0];
      element.selected = data.newSelection;
    },
    filterSelected(data) {
    return data.filter((item) => item.selected);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.0/vuex.js"></script>
<div id="app">
<h1>Example with vuex</h1>
<table>
    <thead>
        <tr>
            <th> Check </th>
            <th> Title </th>
        </tr>
    </thead>
    <list-tbody-vuex v-for="element in elements" :element="element" :key="element.id"> </list-tbody-vuex>
</table>
  <pre>only selected: {{filterSelected(vuexElements)}}</pre>
  <pre>{{vuexElements}}</pre>
  
<hr/>
<h1>Example with events</h1>
<table>
    <thead>
        <tr>
            <th> Check </th>
            <th> Title </th>
        </tr>
    </thead>
    <list-tbody-events v-for="element in elements" :element="element" :key="element.id" @selected="updateElement"> </list-tbody-events>
</table>
  <pre>only selected: {{filterSelected(elements)}}</pre>
  <pre>{{elements}}</pre>
</div>

Answer 2

Two methods for handling this situation are suggested in the comments:

One option is to utilize Vuex and modify the elements array from the child component.
The other option involves emitting an event on each selection click event to the parent, allowing the parent to update the elements array.

The preference lies with the second method, as there is no utilization of Vuex, which is perfectly acceptable.

Once the data is "linked" between the child component and the parent, a filter method can be used to display only the selected elements.

Take a look at the provided demo below or the fiddle mentioned in the comment for more details.

const listTbodyVuex = {
props: ['element'],
template: `
  <tbody>
    <tr>
        <td>
            <input type="checkbox" @click="selected">
        </td>
        <td> {{element.title}} </td>
    </tr>
</tbody>
  `,
  methods: {
  ...Vuex.mapMutations(['changeSelection']),
  selected(evt) {
      this.changeSelection({
      id: this.element.id, selected: evt.target.checked
      });
    }
  }
}

const listTbodyEvents = {
props: ['element'],
template: `
  <tbody>
    <tr>
        <td>
            <input type="checkbox" @click="selected">
        </td>
        <td> {{element.title}} </td>
    </tr>
</tbody>
  `,
  methods: {
  selected(evt) {
    console.log('clicked', evt.target.checked)
      this.$emit('selected', {
      element: this.element,
        newSelection: evt.target.checked
      })
    }
  }
}

const store = new Vuex.Store({
state: {
  elements: [
      {
      id: 0,
      title: 'first',
        selected: false
      },
      {
      id: 1,
      title: 'second',
        selected: false
      },
      {
      id: 2,
      title: 'third',
        selected: false
      }
      ]
  },
  mutations: {
  changeSelection(state, {id, selected}) {
    let element = state.elements
      .filter((element) => element.id === id)[0];
      element.selected = selected;
      Vue.set(state.elements, element.id, element);
    }
  }
})

new Vue({
el: '#app',
  store,
  data() {
  return {
    elements: [
      {
      id: 0,
      title: 'first',
        selected: false
      },
      {
      id: 1,
      title: 'second',
        selected: false
      },
      {
      id: 2,
      title: 'third',
        selected: false
      }
      ]
    }
  },
  computed: {
  ...Vuex.mapState({
    vuexElements: (state) => state.elements
    })
  },
  components: {
  listTbodyEvents,
    listTbodyVuex
  },
  methods: {
  updateElement(data) {
    let element = this.elements
      .filter((element) => element.id === data.element.id)[0];
      element.selected = data.newSelection;
    },
    filterSelected(data) {
    return data.filter((item) => item.selected);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.0/vuex.js"></script>
<div id="app">
<h1>Example with vuex</h1>
<table>
    <thead>
        <tr>
            <th> Check </th>
            <th> Title </th>
        </tr>
    </thead>
    <list-tbody-vuex v-for="element in elements" :element="element" :key="element.id"> </list-tbody-vuex>
</table>
  <pre>only selected: {{filterSelected(vuexElements)}}</pre>
  <pre>{{vuexElements}}</pre>
  
<hr/>
<h1>Example with events</h1>
<table>
    <thead>
        <tr>
            <th> Check </th>
            <th> Title </th>
        </tr>
    </thead>
    <list-tbody-events v-for="element in elements" :element="element" :key="element.id" @selected="updateElement"> </list-tbody-events>
</table>
  <pre>only selected: {{filterSelected(elements)}}</pre>
  <pre>{{elements}}</pre>
</div>

Answer 3

Answer №2

To maintain a clean separation of components, it's generally best practice to stick to emitting values. However, if you're determined to retrieve all data at once, there is a workaround you can use.

In your child component, add a data attribute that your checkbox utilizes with the v-model directive. Let's say you name it checkbox_value. Then, in your parent component method, you could do something like this:

var checkbox_values = [];
this.$children.forEach(function(child) {
    // You can include a check for the child type here if needed
    checkbox_values.push(child.$data.checkbox_value);
});

While I don't recommend this approach, ultimately the decision is yours to make.

Please note: The code above will only return values. If necessary, you could modify it to push object key/value pairs instead!

Answer 4

To maintain a clean separation of components, it's generally best practice to stick to emitting values. However, if you're determined to retrieve all data at once, there is a workaround you can use.

In your child component, add a data attribute that your checkbox utilizes with the v-model directive. Let's say you name it checkbox_value. Then, in your parent component method, you could do something like this:

var checkbox_values = [];
this.$children.forEach(function(child) {
    // You can include a check for the child type here if needed
    checkbox_values.push(child.$data.checkbox_value);
});

While I don't recommend this approach, ultimately the decision is yours to make.

Please note: The code above will only return values. If necessary, you could modify it to push object key/value pairs instead!

Is there a way to gather selected checkboxes from all child checkbox components in vue?

Answer №1

Answer №2

Similar questions

Iterate through the entire array without including a specific item

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

Trouble parsing JSON in Classic ASP

What is the best way to utilize props and mounted() in NuxtJS together?

Something went wrong with the API: an error occurred where headers were sent to the client before they could be set

"Sending a POST request from the smartphone application client developed using the Meteor

The deep reactivity feature in Vue3 is functioning well, however, an error is being

jQuery when - anticipate the fulfillment of multiple success/done callbacks

Conceal elements with a single click of a button

Permit the use of the "&" character in mailto href links

Issues with Gulp and Browser Sync integration

Implementing Ajax functionality in MVC 3 to return a partial view

What steps can I take to troubleshoot the inconsistent values in my array of objects?

Incorporating Entrance Animations for Individual Elements within ngView Using AngularJS

Expanding list - Using individual toggles to expand and collapse multiple list items

Vue-2 Jest-24 is encountering a test error, specifically a SyntaxError due to encountering an unexpected character, '#'

The term "Ext" has not been recognized or defined

Encountered an issue while trying to access the length property of an undefined value within an aside

AngularJS Default Option Selection

Attaching to directive parameters