Vue.js Bootstrap 4 , cannot check radio button

Question

I am trying to check by default the Mrs radio button... but it does not work ... I also tried to add a checked attribute wo any success // what could be wrong with my coding ?

    <div class="col-lg-9">
        <form>

            <!-- Full name -->
            <div class="input-group input-group-lg mb-3">
              <div class="input-group-prepend">
                <div class="input-group-text pb-0">
                  <label class="form-group-label active"><input v-model="gender" type="radio" value="Mrs"> Mrs</label>
                </div>
                <div class="input-group-text pb-0">
                  <label><input v-model="gender" type="radio" name="gender" value="Mr"> Mr</label>
                </div>
              </div>
              <input v-model="username" @input="$v.username.$touch" v-bind:class="{ error: $v.username.$error, valid: $v.username.$dirty && !$v.username.$invalid }" type="text" class="form-control" placeholder="Indiquez votre prénom et votre nom">
            </div>

        </form>
    </div>

oniondomes · Accepted Answer · 2018-02-10 12:53:35Z

1

This is how you might do it. I've added the toggle button to show how this binding works:

new Vue({
  el: '#app',
  data: {
    radio: 'mrs',
  },
  methods: {
    toggle() {
      this.radio = this.radio === 'mrs' ? 'mr' : 'mrs';
    }
  },
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input v-model="radio" type="radio" value="mrs">
  <label>Mrs</label>
  <input v-model="radio" type="radio" value="mr">
  <label>Mr</label>
  <button @click="toggle">Toggle</button>
</div>

EDIT: Snippet fixed and updated

edited Feb 10, 2018 at 12:53

answered Feb 10, 2018 at 12:40

oniondomes

2,07315 silver badges22 bronze badges

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

Comments

Carol Skelly · Accepted Answer · 2018-02-10 12:56:19Z

0

You need have the value for gender set in the data model.

https://www.codeply.com/go/KDKbm4PTBO

<label class="form-group-label active">
  <input v-model="gender" type="radio" value="Mrs"> Mrs
</label>

edited Feb 10, 2018 at 12:56

answered Feb 10, 2018 at 12:39

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

1 Comment

oniondomes Over a year ago

the condition you wrote for checked attribute is redundant. you can just set a 'value' for the input. How to handle radio input in official vue docs: vuejs.org/v2/guide/forms.html#Radio

Collectives™ on Stack Overflow

Vue.js Bootstrap 4 , cannot check radio button

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related