Vue中v-for渲染的radio单选组如何正确获取选中按钮的值

针对循环生成的单选组场景，不需要做延迟执行、单独给选中项绑定ref这类冗余操作，以下是三种可直接落地的零兼容问题方案。

原参考代码：

<div v-for="mealService in mealServices" :key="mealService.id">
    <input  @click="setActiveMealService" type="radio" name="meal_type" 
            :id="mealService.meal_type_id"          
            :value="mealService.meal_type_id" 
            v-model="form.meal_type_id"/>
                        
    <label  :for="mealService.meal_type_id">{{ mealService.meal_type.name }}</label>
</div>

方案1：事件传参（优先推荐，无响应式时序问题） #

直接在事件触发时把当前循环项传入函数，完全不依赖v-model的更新时机，是最简单可靠的实现：

1. 调整模板上的事件绑定，传入当前循环项和原生事件对象：

<input  
  @click="setActiveMealService(mealService, $event)" 
  type="radio" 
  name="meal_type" 
  :id="mealService.meal_type_id"          
  :value="mealService.meal_type_id" 
  v-model="form.meal_type_id"
/>

2. 在事件函数中直接读取参数即可拿到当前选中值：

setActiveMealService(mealService, e) {
  // 直接取传入的当前循环项的值
  const selectedId = mealService.meal_type_id
  // 也可通过原生事件对象取触发元素的值：const selectedId = e.target.value
  console.log('当前选中值：', selectedId)
}

方案2：替换事件类型解决v-model读取旧值问题 #

直接读v-model拿到旧值，是因为@click的触发时机早于v-model的响应式更新流程，不需要写setTimeout做延迟，把事件从@click换成@change即可：

1. 调整模板事件绑定：

<input  
  @change="setActiveMealService" 
  type="radio" 
  name="meal_type" 
  :id="mealService.meal_type_id"          
  :value="mealService.meal_type_id" 
  v-model="form.meal_type_id"
/>

2. 事件函数中直接读取v-model绑定值就是最新的选中结果：

setActiveMealService() {
  const selectedId = this.form.meal_type_id
  console.log('当前选中值：', selectedId)
}

方案3：筛选ref数组获取选中项 #

v-for下同名ref返回DOM数组是框架预期行为，不需要单独给选中项绑定ref，直接在数组中筛选出checked属性为true的元素即可：

1. 给input绑定固定ref名：

<input  
  ref="mealRadio"
  @click="setActiveMealService" 
  type="radio" 
  name="meal_type" 
  :id="mealService.meal_type_id"          
  :value="mealService.meal_type_id" 
  v-model="form.meal_type_id"
/>

2. 事件函数中从ref数组筛选选中元素：

setActiveMealService() {
  // 匹配选中状态的radio
  const selectedRadio = this.$refs.mealRadio.find(item => item.checked)
  const selectedId = selectedRadio.value
  console.log('当前选中值：', selectedId)
}

动态给选中项绑定ref属于冗余实现，上述筛选ref数组的方式性能开销可以忽略，完全满足生产环境使用要求。

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