Vue.js Bootstrap 4，无法检查单选按钮 [英] Vue.js Bootstrap 4 , cannot check radio button

问题描述

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

 
<表格><!-- 全名--><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">夫人</label>
<div class="input-group-text pb-0"><label><input v-model="gender" type="radio" name="gender" value="Mr">先生</label>

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

</表单>

解决方案

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

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

<input v-model="gender" type="radio" value="Mrs">太太

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>

解决方案

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>

这篇关于Vue.js Bootstrap 4，无法检查单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！