vue如何双向绑定v-for循环出来的checkedbox和radio

Question

问题描述

做在线答题碰头的问题(之前没做过，没什么思路！)

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<div class="topic_list" v-if="DXTS.length !==0">
              <div class="topic_list_tit"><p>多选题</p> <span>(本类题共10分，每题3分，共30分)</span></div>
              <ul class="topic">
                <li v-for="(item1,index1) in DXTS" :key="index1">
                  <p>{{item1.topicChild.title}}</p>
                  <ul class="topic_option">
                    <li class="ty-list-li" v-for="(item,key,index) in item1.topicChild.contentMap" :key="key">
                      <div class="answer">
                        <input :id="item1.id+index" class="ty-list-input" :name="item1.id" :value="key" type="checkbox"
                               @click="topic_stateDXTS(index1,item1.id,item1.childTypeCode,key,$event)" ref="lid">
                        <label :for="item1.id+index">{{key}}</label>
                      </div>
                      <p>{{item}}</p>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>

js

topic_stateDXTS(Index, practiceIdChild, childTypeCode, val, e) {
        let a = document.getElementById(practiceIdChild);
        if (e.target.checked) {  //当前checked为true的时候进来·~~
          if (!judgeRepeat(e.target.defaultValue, this.state_answer)) {   //判断用选中又取消的情况，当一样的时候不给进来~
            this.state_answer.push(e.target.defaultValue);    //添加到一个数组了，这个state_answer是选项的数据
            a.style.backgroundColor = '#f60';      //这里是修改答题卡的颜色
            a.style.color = '#fff'
          }
        } else {
          this.state_answer.pop();
          if (this.state_answer.length === 0) {  //当checkedbox没有选的时候取消答题卡的颜色
            a.style.backgroundColor = '#fff';
            a.style.color = '#333'
          }
        }
        function judgeRepeat(VALUE, obj) {
          for (let key in obj) {
            if (VALUE === obj[key]) {
              return true;
            }
          }
        }
        this.check_DXTS = this.state_answer.join(',');
        console.log(this.check_DXTS);
        /*这里如果填充数据进去的话，当用户取消选择或者选择别的也会一样push进去*/
        // obj.topicChild.push({practiceIdChild, userAnswer: this.state_answer.join(',')});
        // obj.childTypeCode = childTypeCode;
        // this.paper_data.content.push(obj);
        // console.log(this.paper_data);
      },

你期待的结果是什么？实际看到的错误信息又是什么？

我是通过上面那样来设置，发现BUG蛮多的，点击取消也会触发，这样又要判断点击数组里是否有相同值等等，总结就是神烦~~如果能通过v-model来绑定每一条题目，并且不会污染到其他题目选中的值就好了

请问该如何写~~~~~

Answer 1

mvvm 框架的核心是操作数据，你代码里面就不要混进dom的操作了，至于当前这种情形，你可以定义一个object 来存储3个按钮的状态，点每一个设置对应的object 的key 就ok 了