VueJS 单选按钮 (b-form-radio) 保持未选中状态

大佬教程收集整理的这篇文章主要介绍了VueJS 单选按钮 (b-form-radio) 保持未选中状态，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决VueJS 单选按钮 (b-form-radio) 保持未选中状态？

我有一个可折叠的下拉菜单，里面有可折叠的组，每个组都有一个单选按钮列表，分组在 b-form-radio-group 中。 当我打开页面时，我用数据填充所有字段，如果满足某些条件，我需要一个单选按钮进行检查。 我尝试使用 :checked="example===example" 并且即使它返回 true，单选按钮仍然未选中。 如果我检查 Vue 控制台，在 props 下，我可以看到 checked 是真的。 到目前为止，我尝试了几乎所有我能在这里找到的东西，但没有任何运气。

对我做错了什么有什么想法吗？这是代码。

<b-form-radio-group v-model="toateMagazineleSelectate">
  <b-form-radio-group v-model="tipMagazinSelectat" ID="magazine" name="magazine">
    <b-form-group v-for="(tipMagazin,index2) in magazine" :key="index2" class="magazine" name="magazine">
      <div class="tipMagazin divCheckBox" v-if="tipMagazin.clasificare !== ''">
        <div class="col-md-11 textTipMagazinSelect">
          {{tipMagazin.clasificare}}
          <span :ID="'tipMagazin'+index2" v-b-toggle="'collapse-'+ index2" class="divIcon"></span>
        </div>
      </div>
      <b-collapse :ID="'collapse-'+ index2" class="collapseBox" visible >
        <b-form-radio-group v-model="model.magazine" class="magazine" name="magazine">
          <div v-for="(magazin,index) in tipMagazin.subclasificari" :key="index" class="divMagazine tipMagazin divCheckBox col-md-12">
            <div class="col-md-11 textMagazinSelect">
              {{magazin}}
            </div>
            <b-form-radio
              :checked="magazin === model.subclasificare"
              :value="{ subclasificare: magazin,clasificare: tipMagazin.clasificare}"
              class="tipMagazinCheck magazine"
              @change="changeMagazine(tipMagazin.clasificare,magazin)">
            </b-form-radio>
          </div>
        </b-form-radio-group>
      </b-collapse>
    </b-form-group>
  </b-form-radio-group>
</b-form-radio-group>

解决方法

new Vue({
  el: "#app",data() {
    return {
      selected: "second",options: [{
          text: "First",value: "first"
        },{
          text: "Second",value: "second"
        }
      ]
    };
  },mounted() {
    setTimeout(() => {
      this.selected = "first";
    },3000);
  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
  <b-collapse id="collapse-1" class="mt-2">
    <b-card>
      <b-form-radio-group id="radio-group-2" v-model="selected" name="radio-sub-component">
        <b-form-radio v-for="item in options" :value="item.value">{{item.text}}</b-form-radio>
      </b-form-radio-group>

      <b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
      <b-collapse id="collapse-1-inner" class="mt-2">
        <b-card>
          <b-form-radio-group id="radio-group-1" v-model="selected" :options="options" name="radio-options"></b-form-radio-group>
        </b-card>
      </b-collapse>
    </b-card>
  </b-collapse>
</div>

大佬总结

以上是大佬教程为你收集整理的VueJS 单选按钮 (b-form-radio) 保持未选中状态全部内容，希望文章能够帮你解决VueJS 单选按钮 (b-form-radio) 保持未选中状态所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。