Vue.js中获取单选框输入值并通过@click传参的正确语法

我来帮你梳理一下正确的写法，你当前的代码里直接用value作为函数参数是有问题的——Vue的事件处理上下文里并没有直接暴露这个变量，所以会出现找不到值或者值不正确的情况。下面是两种靠谱的解决方案：

方法一：通过事件对象获取值 #

你可以利用Vue提供的$event对象，拿到触发点击事件的单选框元素，进而获取它的value值：

<input type="radio" name="phone" :value="mobile.value" @click="setPrice($event.target.value)">

这里的$event.target就是当前被点击的单选框DOM元素，它的value属性就是你通过:value绑定的mobile.value。

方法二：直接传递绑定的变量值 #

既然你已经用:value把mobile.value绑定到了单选框上，那完全可以直接把这个变量作为参数传给函数。这种方式更清晰，也不需要依赖DOM事件对象，代码可读性更高：

<input type="radio" name="phone" :value="mobile.value" @click="setPrice(mobile.value)">

额外小建议 #

如果你的场景是要跟踪单选框的选中状态并触发价格计算，其实更推荐用Vue的响应式特性——通过v-model绑定一个数据属性，然后监听这个属性的变化来调用setPrice。这种写法更符合Vue的设计思路，也能避免手动处理DOM事件的麻烦：

<!-- 模板部分 -->
<input type="radio" name="phone" :value="mobile.value" v-model="selectedPhone">

// 脚本部分
export default {
  data() {
    return {
      selectedPhone: ''
    }
  },
  watch: {
    selectedPhone(newVal) {
      this.setPrice(newVal)
    }
  },
  methods: {
    setPrice(price) {
      // 这里处理价格逻辑
    }
  }
}

当然啦，如果你的需求确实需要用@click触发函数，前面两种方法就完全够用啦。

内容的提问来源于stack exchange，提问作者Dhiaa Eddin Anabtawi