vuejs 如何获取页面中所有被选中的radio

Question

1. 有个打分页，至少10道题目，每道题目下面有4个选项，每个选项分值不同
2. 在每个radio input的属性上都绑定了该选项的分值和它所属的题号
3. 打算一次性获取页面上所有的被选中的input,然后根据其属性值输出题号id和选项分值

求问，vuejs中如何一次性获取所有的被选中的input 单选框

    <ol  type="a">
                <li v-for="(item, index, indexName, subject) in evaSubject" :key="item.id">
                  <span>{{item.subject}}</span><br><span :class="hiddenNum">{{item.id}}</span>
                  <input class="sub-radio" type="radio" :name="item.subject" :data-id="item.id" :data-score="item.weightA"><label>{{item.A}}</label>
                  <span>({{item.weightA}})</span>
                  <input class="sub-radio" type="radio" :name="item.subject" :data-id="item.id" :data-score="item.weightB"><label>{{item.B}}</label>
                  <span>({{item.weightB}})</span>
                  <input class="sub-radio" type="radio" :name="item.subject" :data-id="item.id" :data-score="item.weightC"><label>{{item.C}}</label>
                  <span>({{item.weightC}})</span>
                  <input class="sub-radio" type="radio" :name="item.subject" :data-id="item.id" :data-score="item.weightD"><label>{{item.D}}</label>
                  <span>({{item.weightD}})</span>

                </li>
              </ol>

Answer 1

给每个input添加change事件，将id和分值传递过去，给按钮添加submit事件，新增一个results数组作为记录答案的数组

模板

<ol  type="a">
    <li v-for="(item, index) in evaSubject" :key="item.id">
        <span>{{item.subject}}</span><br><span>{{item.id}}</span>
        <input class="sub-radio" type="radio" :name="item.subject" :data-id="item.id" :data-score="item.weightA" @change="changeResult(item.id,item.weightA)"><label>{{item.A}}</label>
        <span>({{item.weightA}})</span>
        <input class="sub-radio" type="radio" :name="item.subject" :data-id="item.id" :data-score="item.weightB" @change="changeResult(item.id,item.weightB)"><label>{{item.B}}</label>
        <span>({{item.weightB}})</span>
        <input class="sub-radio" type="radio" :name="item.subject" :data-id="item.id" :data-score="item.weightC" @change="changeResult(item.id,item.weightC)"><label>{{item.C}}</label>
        <span>({{item.weightC}})</span>
        <input class="sub-radio" type="radio" :name="item.subject" :data-id="item.id" :data-score="item.weightD" @change="changeResult(item.id,item.weightD)"><label>{{item.D}}</label>
       <span>({{item.weightD}})</span>
    </li>
</ol>
<button @click="submit">提交</button>

数据

data:{
    results:[]
}

方法

methods: {
      submit:function() {
          console.log(this.results)
      },
      changeResult:function(id,score){
          var temp = {id:id,score:score};
          this.results.push(temp);
      }
}

Answer 2

直接v-model="result[index]"绑定每组radio不行吗？

Answer 3

这个你可以设置自己的数据格式, 比如:

data: {
    question0: false,
    question1: false,
    question2: false,
    question3: false
}
提交答案的时候去遍历这个对象就好了, question 也可以是 `[]`, `{}`, 取决于你