问题

开发中遇到多个radio标签时而选得上，时而选不上的问题，记录解决过程和方法

<div v-for="(item, index) in list" :key="index">
  // some code...
  <div v-show="flag === index">
    <div class="form-item">
      <div>支付平台</div>
      <label>
        <input type="radio" v-model="item.chid" name="chid" />商户
      </label>
    </div>
  </div>
</div>

排查

• 首先排查了样式的问题，其他item是可以正常选择
• 然后怀疑是v-model失效，通过v-tool查看是有list[index].chid是正常有赋值
• 后尝试了this.$forceUpdate()和this.$set()也都无果
• 接着尝试name入手，得出是name的问题

原因

因为此处用的v-show, 所以页面里会存在多个相同的name，从而导致问题出现

解决

• 在确定切换操作不频繁的情况下可以使用v-if
• 动态设置:name