如何对取值进行v检验

问题描述

我正在尝试创建一个复选框，仅选择一个。

<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>

我的JS如下所示：

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){
      console.log(e)
      this.additional_grouped = [];
      if (e.target.checked) {
          this.additional_grouped.push(e.target.value);
      }
    }
  }
});

这是旧结果。

我正在尝试获得这样的结果。

我不能通过v-for方法来做到这一点，但我想这样做。因为我有很多数据，如何在v-for中检查值？

这是我的笔：enter link description here

解决方法

使用:value="question.value"而不是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>

,

您缺少值绑定（:value），这是固定的示例：

new Vue({
  el: '#app',index) in questions">
   <input type="checkbox" :value="question.value" v-model="additional_grouped"  @change="uniqueCheck"> {{question.title}}
  </div>
  {{ result }}
</div>

Documentation

,

如果要获取复选框值的数组，则应执行此操作

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

和

new Vue({
  el: '#app',data() {
    return {
       questions: [
         {
           title: 'A',computed: {
    result: function(){
      return this.questions.filter(q => q.checked).map(q => q.value)
    }
  }
});