Radio单选框绑定的值为什么不更新?

司空景景 阅读 23

我在用 Vue 写一个表单,Radio 选了之后 data 里的值没变,明明绑定了 v-model,但切换选项时 selectedValue 还是初始值。是不是哪里写错了?

我试过把 v-model 换成 :value + @change,结果还是一样没反应。控制台也没报错,就是数据不动。

<template>
  <div>
    <label><input type="radio" v-model="selectedValue" value="A"> 选项A</label>
    <label><input type="radio" v-model="selectedValue" value="B"> 选项B</label>
    <p>当前选中:{{ selectedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { selectedValue: 'A' }
  }
}
</script>
我来解答 赞 14 收藏
二维码
手机扫码查看
2 条解答
怡然的笔记
先检查一下你的组件是不是被套在了某个表单里?我遇到过类似情况,当radio被放在form表单里且没有阻止默认事件时,表单会自动重置导致数据绑定失效。

两种解决方案你试下:
1. 如果是这种情况,给form加个 @submit.prevent
2. 或者更简单点,直接在radio的input事件加 @click.stop

代码改成这样:
<label><input type="radio" v-model="selectedValue" value="A" @click.stop> 选项A</label>
<label><input type="radio" v-model="selectedValue" value="B" @click.stop> 选项B</label>


如果还不行,可能是你项目里其他地方影响了这个组件,比如父组件强制传了prop或者用了provide/inject。这种情况建议在radio组件里加个console.log(this.selectedValue),看看值到底有没有变。
点赞 1
2026-03-07 09:09
爱学习的芹芹
你这代码本身没问题,v-model绑定radio的写法就是这样的。问题估计出在别的地方,比如Vue实例没正确挂载,或者组件根本没被使用。

试试看直接跑这个完整示例:




当前选中:{{ selectedValue }}







如果这个能跑通,说明你原来的代码是组件没被正确引入或者父组件没传值之类的。还有个坑,检查一下是不是有其他地方给 selectedValue 写死了,或者有同名变量冲突。
点赞 1
2026-03-02 08:00