element-ui的el-radio-group默认选中无效或反显无效

Posted 2021-10-14 单身girl

el-radio-group之迷惑操作:label和label

今天学习element-ui的el-radio-group的时候发现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的颜色。

通过对比可以看出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'">备选项1</el-radio>
  <el-radio :label="'6'">备选项2</el-radio>
  <el-radio :label="'9'">备选项3</el-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">备选项1</el-radio>
  <el-radio label="6">备选项2</el-radio>
  <el-radio label="9">备选项3</el-radio>
</el-radio-group>

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

当你发现反显成功了， 但是重复点击新增不生效得时候可能是因为关闭表单得时候把默认值清空了