el-radio 无法选中/切换？|选中后无法切换？|如何有效解决？

最新推荐文章于 2025-06-05 23:27:12 发布

AnnGreen

最新推荐文章于 2025-06-05 23:27:12 发布

阅读量4.2k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_47896488/article/details/134146247

文章探讨了Vue中el-radio标签如何正确使用，包括字符串和数字作为label的情况，以及在深度组件层级下数据改变但页面未及时渲染的问题，提到了$set和$forceUpdate的区别以及如何解决组件渲染延迟。

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

网上有其他文章说是 label 的用法，字符串和数字的问题，这种情况可以看一下文档

// radio: 3
<el-radio-group v-model="radio">
  <el-radio :label="3">备选项</el-radio> // 选中
  <el-radio :label="6">备选项</el-radio>
  <el-radio :label="9">备选项</el-radio>
</el-radio-group>

// radio: '3'

<el-radio-group v-model="radio">
  <el-radio :label="'3'">备选项</el-radio> // 选中
  <el-radio :label="6">备选项</el-radio>
  <el-radio :label="9">备选项</el-radio>
</el-radio-group>

一般使用这样就可以了

<template>
  <div>
    <h1>一个基本数据类型</h1>
    <div class="demo-item">
      <el-radio-group v-model="radio">
        <el-radio :label="'3'">备选项</el-radio>
        <el-radio :label="6">备选项</el-radio>
        <el-radio :label="9">备选项</el-radio>
      </el-radio-group>
    </div>
    <div class="demo-item">
      <el-button @click="setValue(3)">赋值为3</el-button>
      <el-button @click="setValue(6)">赋值为6</el-button>
      <el-button @click="setValue(9)">赋值为9</el-button>
    </div>

    <h1>一个对象的属性</h1>
    <div class="demo-item">
      <el-radio-group v-model="obj.radio">
        <el-radio :label="3">备选项</el-radio>
        <el-radio :label="6">备选项</el-radio>
        <el-radio :label="9">备选项</el-radio>
      </el-radio-group>
    </div>
    <div class="demo-item">
      <el-button @click="setObjValue(3)">赋值为3</el-button>
      <el-button @click="setObjValue(6)">赋值为6</el-button>
      <el-button @click="setObjValue(9)">赋值为9</el-button>
    </div>

    <h1>Select选择器</h1>
    <div class="demo-item">
      <el-select
        v-model="value2"
        multiple
        collapse-tags
        style="margin-left: 20px"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="demo-item">
      <el-button @click="push('选项1')">黄金糕</el-button>
      <el-button @click="push('选项2')">双皮奶</el-button>
      <el-button @click="push('选项3')">蚵仔煎</el-button>
      <el-button @click="push('选项4')">龙须面</el-button>
      <el-button @click="push('选项5')">北京烤鸭</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio: "3",
        obj: {
          radio: 3,
        },
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
        value2: [],
      };
    },
    methods: {
      setValue(value) {
        this.radio = value;
      },
      setObjValue(value) {
        this.obj.radio = value;
      },
      push(obj) {
        this.value2.push(obj);
        console.log(this.value2);
      },
    },
    created() {},
  };
</script>

确实不属于这种情况
几乎所有人都属于第二种情况，使用 vuex 查看相应的数据，确实是改变了，但是页面不能及时渲染，究其原因，是因为组件求层级太深，页面不能及时渲染导致的，使用$forceUpdate即可解决。有文章说使用$set，这两者还是有区别的，

$set：在响应式对象上添加新的属性，使其成为响应式的。
$forceUpdate：用于强制组件重新渲染。

<el-radio-group v-model="form.psyState" @change="form.warningLevel = ''">
  <el-radio :label="0" @change="update(0)">文本1</el-radio>
  <el-radio :label="1" @change="update(1)">文本2</el-radio>
  <el-radio :label="2" @change="update(2)">文本3</el-radio>
</el-radio-group>

update(label) {
    this.$forceUpdate();
},