vue.js radio button not getting checked by default?

Question

I have 2 radio buttons. I need to bind their value to a variable by using v-model in vue.js. When v-model is added, both radio buttons showing as unchecked.

<div class="radio-item">
  <input type="radio" id="ritema" name="ritem" value="business" checked v-model="picked">
  <label for="ritema">Business </label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="public" v-model="picked">
    <label for="ritemb">Public</label>
</div>

Did you set picked data value to either "public" or "business"? — dfsq
– dfsq, Commented May 9, 2017 at 6:06
No..I didn't. So we should set value to 'picked' in the data section right? — LJP
– LJP, Commented May 9, 2017 at 6:12

tony19 · Accepted Answer · 2022-07-15 05:09:23Z

2

v-model always use the data property as the single source of truth.

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

Source: https://v2.vuejs.org/v2/guide/forms.html#Basic-Usage

So as the comment said, you just have to work on the value of picked on your Vue instance.

data() {
    return {
        picked: "business"
    };
}

edited Jul 15, 2022 at 5:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 9, 2017 at 11:41

FitzFish

8,6193 gold badges33 silver badges43 bronze badges

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

2 Comments

Syan Souza Over a year ago

is there any way to vue not ignore the default value from html?

FitzFish Over a year ago

It may be possible to assign the value in the mounted hook: get it directly from the DOM, using the ref attribute. See: vuejs.org/v2/api/#ref Not tested by the way.

Collectives™ on Stack Overflow

vue.js radio button not getting checked by default?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related