CODEWITHSUNDEEP
htmlvue.js
LJP
LJP

Reputation: 1951

vue.js radio button not getting checked by default?

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>

Upvotes: 0

Views: 7222

Answers (1)

FitzFish
FitzFish

Reputation: 8629

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"
    };
}

Upvotes: 2

Related Questions