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