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

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',  
    };
  }
};