Accessing checkbox values within a vue.js component

Question

Accessing checkbox values within a vue.js component

Recently, I delved into the world of vue.js and have been trying to familiarize myself with it.

I've spent quite a bit of time tinkering around to make this simple example function: extracting the values of selected checkboxes in components using vue.js .

You can view my example at http://jsbin.com/gukoqo/edit?html,js,output

How can I ensure that the parent instance's selected property contains the selected checkbox values? For example, if filter_a and filter_c are selected, then selected should be an array: ['filter_a', 'filter_c']

I assumed that vue.js would provide a straightforward solution for this, but I am still unclear about how to achieve it. Any insights? :)

I'm working with the latest version of vue.js (2.3.3 currently).

javascript vue.js vuejs2

Answer 1

Answer №1

Here is a potential solution.

Vue.component('facet-filter', {
  props: ['filter', 'checked'],

  template: `<div>
              <label class="form-check-label">
                <input @change="$emit('change', filter.text, $event)" 
                       class="form-check-input" 
                       type="checkbox" 
                       :value="filter.text" 
                       :checked="checked" 
                       name="filters"> {{filter.text}}
              {{$props | json 2}}</label>
            </div>`,
});

new Vue({
  el: '#app',
  data: {
    filterFacets: [
      { id: 0, text: 'filter_a' },
      { id: 1, text: 'filter_b' },
      { id: 2, text: 'filter_c' },
      { id: 3, text: 'filter_d' },
    ],
    selected: [], // How can I ensure this contains ['filter_a', 'filter_b'] etc. when selected?
  },
  methods:{
    onChange(filter, $event){
      if ($event.target.checked)
        this.selected.push(filter)
      else {
        const index = this.selected.findIndex(f => f === filter)
        if (index >= 0)
          this.selected.splice(index, 1)
      }
    }
  }
});

Make sure to update your template accordingly:

<div id="app">
  <facet-filter
    v-for="item in filterFacets"
    v-bind:filter="item"
    v-bind:checked="selected.includes(item.text)"
    :key="item.id"
    @change="onChange"
    >
  </facet-filter>
  <p><pre>data: {{$data | json 2}}</pre></p>
</div>

Check out the revised example.

Answer 2

Here is a potential solution.

Vue.component('facet-filter', {
  props: ['filter', 'checked'],

  template: `<div>
              <label class="form-check-label">
                <input @change="$emit('change', filter.text, $event)" 
                       class="form-check-input" 
                       type="checkbox" 
                       :value="filter.text" 
                       :checked="checked" 
                       name="filters"> {{filter.text}}
              {{$props | json 2}}</label>
            </div>`,
});

new Vue({
  el: '#app',
  data: {
    filterFacets: [
      { id: 0, text: 'filter_a' },
      { id: 1, text: 'filter_b' },
      { id: 2, text: 'filter_c' },
      { id: 3, text: 'filter_d' },
    ],
    selected: [], // How can I ensure this contains ['filter_a', 'filter_b'] etc. when selected?
  },
  methods:{
    onChange(filter, $event){
      if ($event.target.checked)
        this.selected.push(filter)
      else {
        const index = this.selected.findIndex(f => f === filter)
        if (index >= 0)
          this.selected.splice(index, 1)
      }
    }
  }
});

Make sure to update your template accordingly:

<div id="app">
  <facet-filter
    v-for="item in filterFacets"
    v-bind:filter="item"
    v-bind:checked="selected.includes(item.text)"
    :key="item.id"
    @change="onChange"
    >
  </facet-filter>
  <p><pre>data: {{$data | json 2}}</pre></p>
</div>

Check out the revised example.

Accessing checkbox values within a vue.js component

Answer №1

Similar questions

Modify the content of a separate division by selecting a different item in a list with the help of Vue.js and TypeScript

Angular implementation of checkboxes to streamline data filtering

When working with Sequelize, you can establish a constraint in SQL Server that allows you to set column A only when column B is null, and vice

Using JavaScript, display JSON data retrieved from a PHP file

Issue with PrimeNG Carousel width on mobile devices

The standard flow of work in ReactJS

Searching for matching strings in jQuery and eliminating the parent div element

Nuxt.js | Issue with accessing property from computed method's return object

What is the best way to switch focus to the next input using jQuery?

"Exploring the power of NodeJS with createServer, dealing with

How to Merge Items within an Array of Objects Using Typescript?

The mysterious case of the missing currentUserObj in Angular with rxjs Subject

`In HTML, trigger blocks based on the number chosen by the user`

The Next.js router translates query parameters into encoded format when using the router.push

Every third item is selected using a JQuery selector

Numbering Tables Effectively in ReactJS

Tips for tracking advertisement views and saving them in a database

Summing values in es6 (TypeScript) without explicitly knowing their corresponding keys

Entering _this

Inaccurate Error Handling in Try-Catch Blocks