How to make a radio button checked by default in Vuejs?

Question

When the page loads, the radio buttton status should be checked status need, after that on change radio button, bellow div should be hide and show. I wrote the bellow code but it is not working:

html
----
<div id="demo">
  <input type="radio" value="male" v-model="male" v-bind:checked="checked" />
   <input type="radio" value="male" v-model="male" v-bind:checked="unchecked" />
</div>

javascript
---------
new Vue({
    el: '#demo',
  data: {
    checked: true
  },
methods:{
  onChange:function(){
   checked=false;
}
}
})

krisanalfa · Accepted Answer · 2018-07-16 14:58:38Z

33

Apparently, Vue will check input if bound value is the same with input value:

Check out this fiddle: https://jsfiddle.net/v7zj4c13/188/

<input type="radio" name="gender" value="female" v-model="gender"/>
<input type="radio" name="gender" value="male" v-model="gender"/>

new Vue({
    el: '#demo',
    data: {
        gender: "female"
    }
})

Code above will checked the female input, not the male one

edited Jul 16, 2018 at 14:58

answered May 24, 2017 at 6:18

krisanalfa

6,4482 gold badges32 silver badges39 bronze badges

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

3 Comments

ramesh 1226 Over a year ago

based radio button div should be show hide , how can i do "jsfiddle.net/v7zj4c13/1"

Dan Over a year ago

Helped me realize that checked attribute does not set value of the v-model property at initialization. Thanks.

krisanalfa Over a year ago

@ramesh1226 not sure what you mean, how about this? jsfiddle.net/ng5s9dye

Piece · Accepted Answer · 2020-08-16 17:29:33Z

Now we have to choose between 2 conditions. So we should use input radio group.

<b-form-radio-group v-model="gender">
    <input type="radio" value="female"/>
    <input type="radio" value="male"/>
</b-form-radio-group>

And you can set "female" or "male" as variable "gender" initial value.

data() {
    return {
        ...
        gender: 'female',
        ...
    }
}

If you use radio button as individual element, not as group element. Its v-model variable has to be unique, also we can set as default checked option like this.

<input type="radio" value="female" v-model="gender"/>
<input type="radio" value="1" v-model="isOnline"/>

data() {
    return {
        ...
        gender: 'female',
        isOnline: 0,
        ...
    }
}

TT. · Accepted Answer · 2021-11-08 10:05:14Z

In the context of what you provided in the html input value as male appearing twice makes no sense because vue.js model entirely depends on the input value to determine the v-model value in the data method under the script section, it's rather you can add female in one of the input fields if your intention is to switch between male and female, you also don't need v-bind:checked="checked" as vue.js determines the default selected radio item from the v-model(gender) you will specify in data function that will be returned, the below is the change you can make in the input radio fields,

<div id="demo">
  <input type="radio" value="male" v-model="gender"/>
   <input type="radio" value="female" v-model="gender"  />
</div>

Lastly, you can add the below in the data function in the script section,

new Vue({
    el: '#demo',
    data: function(){
    return {
        gender: "female"
    }
}
})

and above functional data option is the best practice other than

new Vue({
    el: '#demo',`enter code here`
    data: {
        gender: "female"
    }
})

, for component re usability reason

Collectives™ on Stack Overflow

How to make a radio button checked by default in Vuejs?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related