【求解】vue input radio 点击事件取值问题

最新推荐文章于 2025-05-27 16:34:12 发布

saturday-yh

最新推荐文章于 2025-05-27 16:34:12 发布

阅读量2.4w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：技术问题

本文链接：https://blog.youkuaiyun.com/qq_42092177/article/details/80938262

vue 专栏收录该内容

39 篇文章

订阅专栏

本文探讨了在Vue框架中使用radio按钮组时遇到的问题：如何确保点击事件能够准确地获取选中的值。通过实验发现，直接将事件绑定在包含radio按钮的元素上时，无法正确获取值；而绑定在其他元素上则可以正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="app">

    <div class="taskList" @click="handle">
          <input type="radio"  name="task" value="1"  v-model='selectStatus'>全部
          <input type="radio"  name="task" value="2" v-model='selectStatus'>已完成
          <input type="radio"  name="task" value="3" v-model='selectStatus'>检索中
          <input type="radio"  name="task" value="4" v-model='selectStatus'>未开始
</div>
  </div>
</template>

<script>
export default {
  name: "app",
 data(){
        return{
            selectStatus:'',
        }
    },
    methods:{
      handle(){
        console.log("取到的值是"+this.selectStatus);
      }
    },
  watch:{
    selectStatus:function(newval,oldval){
        console.log("当前应取到的值："+newval,"这是之前的值："+oldval);
    }
  }
};
</script>

如果不把事件绑定在这个 .task和其中的input上，当选择好radio后,绑定在其他元素来触发点击事件就可以准确传值，希望有朋友能帮我看看是怎么回事？