[Vuejs]-How to v-for checked value

by

1👍

✅

You are missing the value binding (:value), here’s your example fixed:

new Vue({
  el: '#app',
  data() {
    return {
      additional: [],
      additional_grouped: [],
       questions: [
         {
           title: 'A',
           value: 0
         },
         {
           title: 'B',
           value: 1
         },
         {
           title: 'C',
           value: 2
         }
       ]
    }
  },
  computed: {
    result: function(){
      return this.additional.concat(this.additional_grouped);
    }
  },
  methods: {
    uniqueCheck(e){
      this.additional_grouped = [];
      if (e.target.checked) {
          this.additional_grouped.push(e.target.value);
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <div v-for="(question, index) in questions">
   <input type="checkbox" :value="question.value" v-model="additional_grouped"  @change="uniqueCheck"> {{question.title}}
  </div>
  {{ result }}
</div>

Documentation

👤Tamas Szoke

1👍

uses :value="question.value" instead of value="question.value"

new Vue({
  el: '#app',
  data() {
    return {
      additional: [],
      additional_grouped: [],
       questions: [
         {
           title: 'A',
           value: 0
         },
         {
           title: 'B',
           value: 1
         },
         {
           title: 'C',
           value: 2
         }
       ]
    }
  },
  computed: {
    result: function(){
      return this.additional.concat(this.additional_grouped);
    }
  },
  methods: {
    uniqueCheck(e){
      this.additional_grouped = [];
      if (e.target.checked) {
          this.additional_grouped.push(e.target.value);
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <div v-for="(question, index) in questions">
   <input type="checkbox" :value="question.value" v-model="additional_grouped"  @change="uniqueCheck"> {{question.title}}
  </div>
  {{ result }}
</div>
👤Sphinx

1👍

If you want to get an array of the values of checked boxes, you should just do this

<div id="app">
 <div v-for="(question, index) in questions" :key="index">
   <input type="checkbox" v-model="question.checked"> {{question.title}}
  </div>
  {{ result }}
</div>

and

new Vue({
  el: '#app',
  data() {
    return {
       questions: [
         {
           title: 'A',
           value: 0
         },
         {
           title: 'B',
           value: 1
         },
         {
           title: 'C',
           value: 2
         }
       ]
    }
  },
  computed: {
    result: function(){
      return this.questions.filter(q => q.checked).map(q => q.value)
    }
  }
});
👤Sélim Achour

Leave a comment