Question

我试图默认检查太太单选按钮......但它不起作用...我也试图添加一个检查属性任何成功// 我的编码可能有什么问题？

    <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>

Answer 1

这是你可能会这样做的。我添加了切换按钮以显示此绑定的工作原理：

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>

编辑：代码段修复和更新

Answer 2

您需要在数据模型中设置gender的值。

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

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

Vue.js Bootstrap 4，无法检查单选按钮

2 个答案: