vue js - radio button won't check by default with v-model attribute

Question

If I remove the v-model attribute, checked works.

<input type="radio" name="sign" value="+" v-model="sumType" checked="checked"> Addition
<input type="radio" name="sign" value="-" v-model="sumType"> Subtraction

How do I default check a radio button that has a vue js model attribute?

Taylor Glaeser · Accepted Answer · 2016-05-05 03:27:20Z

5

Just set the v-model property to the value of the radio that you want to be checked by default.

For example:

export default {
  data () {
    return {
      sumType: '-'
    }
  }
}

would select the Subtraction radio on page load.

Using the following HTML (with the above component structure) works:

<input type="radio" name="sign" value="+" v-model="sumType"> Addition
<input type="radio" name="sign" value="-" v-model="sumType"> Subtraction

answered May 5, 2016 at 3:27

Taylor Glaeser

1,31312 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Uzbekjon · Accepted Answer · 2016-05-03 15:03:35Z

2

sumType model's value overrides your checked attribute.

Probably, you want to specify the binding value (v-bind:value=""):

<input type="radio" name="sign" value="+" v-bind:value="+" v-model="sumType"> Addition
<input type="radio" name="sign" value="-" v-bind:value="-" v-model="sumType"> Subtraction

answered May 3, 2016 at 15:03

Uzbekjon

11.8k5 gold badges40 silver badges55 bronze badges

1 Comment

Syed Over a year ago

May be, '+' should be wrapped with strings, v-bind:value=" '+' " rather just v-bind:value="+"

Collectives™ on Stack Overflow

vue js - radio button won't check by default with v-model attribute

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related