Element-UI单选框（el-radio-group）点击事情的问题

最新推荐文章于 2025-06-16 10:40:51 发布

转载最新推荐文章于 2025-06-16 10:40:51 发布 · 1.6w 阅读

11 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017908035

文章标签：

#ui #javascript #ViewUI

本文解决了一个在Vue项目中使用element-ui的el-radio-group组件时遇到的问题，即点击事件未触发。通过调整事件监听从click改为change，并确保正确使用v-model绑定属性，实现了预期的单选组功能。

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

结合el-radio-group元素和子元素el-radio可以实现单选组：

template部分：

<el-radio-group v-model="tabPosition" v-for="item in tabs" :key="item.id" @click="toggleTab(item.id)">
    <el-radio-button :label="item.name"></el-radio-button>
</el-radio-group>

script部分：

export default {
  data() {
    return {
      tabPosition: '英语',
      tabs: []
    };
  },
  created() {
    this.getTabs();
  },
  methods: {
    getTabs() {
      this.$http.getData('/categories').then(val => {
        this.tabs = val.data;
      })
    }
 }

发现，点击按钮没有效果。查阅文档发现radio-group点击事情使用的是change，而我之前惯性使用了click。