element el-radio-group默认选中样式无法更新问题

转载:https://blog.csdn.net/cream66/article/details/105380191

el-radio-group在设置默认值时样式无效,但是点击其他单选框切换时,却可以切换成功。

element-ui官网Radio单选框的使用中,基础用法使用的是label,radio的值是字符串;单选框组el-radio-group使用的是:label,radio的值是数字。这里我们很容易混淆对:label和label的使用,

基础用法

<template>
  <el-radio v-model="radio" label="1">备选项el-radio>
  <el-radio v-model="radio" label="2">备选项el-radio>
template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
script>

单选框组

<template>
  <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>

<script>
  export default {
    data () {
      return {
        radio: 3           //这里我不小心安装基础用法写成了radio: '3';
      };
    }
  }
script>

从上面的代码我们可以看到radio的值分别是字符串’1’和数字3,有什么区别呢?先看一下在编辑器中的label和:label的颜色。
element el-radio-group默认选中样式无法更新问题_第1张图片
通过对比可以看出label中的双引号"是红色的,:label中的双引号"是白色的。

原因:label属性中,双引号和数字都为红色,是因为他们同属于字符串"3";而:label中双引号是白色的,因为它只是用来包裹内容,所以这里的:label="3"代表数字3;如果想让:label的值是字符串则必须再给3加上单引号。

注意:在Vue中,加冒号的属性,引号里的值一般为一个变量或者表达式,如果为常量时,常量值需忽略后面的引号;没加冒号的属性,值包括后面的引号部分。例如:

label=“3”,表示label的值为字符串3,v-model变量的值应为字符串;
:label=“3”,表示label的值为数字3,v-model变量的值应为数字;
:label="‘3’",表示label的值为字符串3,v-model变量的值应为字符串;

解决方案一:将 v-model中radio的值改为数字,或者将:label的值改为"‘3’"。

// 使用:label,值为数字
<template>
  <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>

export default {
  data() {
    return {
      radio: 3,     // 这里改为数字
    };
  }
};

// 使用:label,值为字符串
<el-radio-group v-model="radio">
  <el-radio :label="'3'">备选项1el-radio>
  <el-radio :label="'6'">备选项2el-radio>
  <el-radio :label="'9'">备选项3el-radio>
el-radio-group>

export default {
  data() {
    return {
      radio: ’3‘,  
    };
  }
};

解决方案二:将el-radio-group单选框组中的:label改为label默认值就可以生效了。

// 使用label标签,值为字符串
<el-radio-group v-model="radio">
  <el-radio label="3">备选项1el-radio>
  <el-radio label="6">备选项2el-radio>
  <el-radio label="9">备选项3el-radio>
el-radio-group>

export default {
  data() {
    return {
      radio: ’3‘,  
    };
  }
};

你可能感兴趣的:(elementUI,Vue)