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

司空景景 阅读 3

我在用 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>
我来解答 赞 7 收藏
二维码
手机扫码查看
1 条解答
爱学习的芹芹
你这代码本身没问题,v-model绑定radio的写法就是这样的。问题估计出在别的地方,比如Vue实例没正确挂载,或者组件根本没被使用。

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




当前选中:{{ selectedValue }}







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