Vue.js无关联响应式元素互相影响 单选框选中状态异常排查求助

• 最核心的触发原因是原生单选框name属性冲突：原生HTML规则中，所有name属性相同的<input type="radio">会被自动归为同一组，同一组内同一时间只能有一个单选框处于选中状态。如果顶部某组单选框的question.quesn值，刚好和底部单选框绑定的section.accept的字符串/数值完全相等，浏览器就会把这两组本不相关的单选框识别为同一组。你点击底部单选框时，浏览器原生行为会自动取消同组其他单选框的选中状态，但这个操作是DOM层面的，没有触发Vue的响应式更新，所以Vue Devtools里的question.answer值没有变化，和你描述的现象完全吻合。
• 次要可能原因是v-for未绑定key导致DOM复用异常：你代码里所有的v-for循环（包括qSection循环、question循环、icnt循环）都没有绑定唯一的key属性，Vue在页面更新时可能会错误复用已经存在的单选框DOM节点，导致DOM的选中状态和绑定的数据脱节。

• 1. 给所有单选框的name属性加唯一前缀，从根源避免跨组冲突：
     顶部单选框name修改为：

  <input type = "radio" :name= "`ques_${question.quesn}`" :value = "(icnt%3)" v-model="question.answer"/>
  

  底部单选框name修改为：

  <input type = "radio" :name = "`sec_accept_${section.id}`" :value="1" v-model="section.accept">
  

  前缀可以根据业务场景自定义，只要保证不同组的单选框name不会重复即可。
• 2. 给所有v-for循环绑定唯一key属性：
     示例修改如下，key请用业务层面的唯一id，不要用数组索引：

  <template v-for="qSection in qSections" :key="qSection.id">
  ...
    <!--- loop to output individual questions here --->
    <tr v-for = "question in qSection.questions" :key="question.id">
      <td>
        {{ question.txt }}
        <div v-if="question.incf">
          <br/>
          <textarea rows="2" cols = "80" :name= "question.cmt" 
            v-model="question.cmt" placeholder = "Comments here"
            class="hideOnPrint"
          />
  
          <div class="print-only"> {{ question.cmt }} </div>
        </div>
      </td>
      <!-- okay, three more tds to hold radio box-->
      <template v-for="icnt in [1,2,3]" :key="icnt">
      <td>
          <label v-if="question.otherAns" class="other-ans-label">
            {{ question.otherAns[icnt].txt }}
          </label><br/><br/>
          <input type = "radio" :name= "`ques_${question.quesn}`" :value = "(icnt%3)"
            v-model="question.answer"/>
      </td>
      </template>
    </tr>
  

• 3. 可选优化：补充单选框的id和label的for属性关联，点击label即可选中对应单选框，同时也能进一步降低DOM识别错误的概率。

如果完成以上修改后问题仍存在，可以按以下顺序排查：

• 打开浏览器F12元素面板，直接搜索顶部和底部单选框的name属性值，确认是否存在重复的name。
• 临时给不同位置的单选框加不同的边框样式，触发问题后观察DOM节点有没有发生替换/复用，确认是不是key绑定的问题。
• 给顶部单选框加@change事件打印日志，确认触发异常时有没有走到change事件，排除事件冒泡等其他因素的影响。

内容的提问来源于stack exchange，提问作者Mike Arrh