The El radio group default selection of element UI is invalid or the anti display is invalid

Confusing operation of El radio group: label and label

When learning El radio group of element UI today, I found that the default value setting of El radio group is invalid, but clicking other radio boxes can switch successfully.
In the use of the radio radio radio box on the element UI official website, the basic usage is label, and the value of radio is string; The radio box group El radio group uses label, and the value of radio is a number. Here we can easily confuse the use of label and label
Basic usage

<template>
  <el-radio v-model="radio" label="1">Alternatives</el-radio>
  <el-radio v-model="radio" label="2">Alternatives</el-radio>
</template>

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

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="3">Alternatives</el-radio>
    <el-radio :label="6">Alternatives</el-radio>
    <el-radio :label="9">Alternatives</el-radio>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio: 3           //Here I accidentally wrote radio: '3' according to the basic usage;
      };
    }
  }
</script>

From the above code, we can see that the values of radio are string '1' and number 3 respectively. What's the difference? Let's first look at the label in the editor and the color of: label.

Through comparison, it can be seen that the double quotation marks in the label are red and the double quotation marks in the label are white.

Reason: in the label attribute, double quotation marks and numbers are red because they both belong to the string "3"; The double quotation marks in the label are white, because they are only used to wrap the content, so: label="3" here represents the number 3; If you want the value of: label to be a string, you must add a single quotation mark to 3.

Note: for the attribute with colon in Vue, the value in quotation marks is generally a variable or expression. If it is a constant, the quotation marks behind the constant value should be ignored; For an attribute without a colon, the value includes the quotation mark after it. For example:

Label = "3", indicating that the value of label is string 3, and the value of v-model variable should be string;
: label = "3", indicating that the value of label is number 3, and the value of v-model variable should be number;
: label = "'3 '", indicating that the value of label is string 3, and the value of v-model variable should be string;

Solution 1: change the value of radio in v-model to a number, or change the value of label to "3".

// Use: label, the value is a number
<template>
  <el-radio-group v-model="radio">
    <el-radio :label="3">Alternatives</el-radio>
    <el-radio :label="6">Alternatives</el-radio>
    <el-radio :label="9">Alternatives</el-radio>
  </el-radio-group>
</template>

export default {
  data() {
    return {
      radio: 3,     // Change here to number
    };
  }
};// Using: label, the value is a string
<el-radio-group v-model="radio">
  <el-radio :label="'3'">Option 1</el-radio>
  <el-radio :label="'6'">Option 2</el-radio>
  <el-radio :label="'9'">Alternative 3</el-radio>
</el-radio-group>

export default {
  data() {
    return {
      radio: '3',  
    };
  }
};
Solution 2: will el-radio-group In a radio box group:label Change to label The default value can take effect.

// Use the label label and the value is a string
<el-radio-group v-model="radio">
  <el-radio label="3">Option 1</el-radio>
  <el-radio label="6">Option 2</el-radio>
  <el-radio label="9">Alternative 3</el-radio>
</el-radio-group>

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

When you find that the anti display is successful, but the repeated click on add does not take effect, it may be because the default value is cleared when closing the form

Tags: Javascript Vue.js html Element-ui

Posted on Sat, 25 Sep 2021 22:23:42 -0400 by glueater