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

【问题标题】：VueJS radio button (b-form-radio) remains uncheckedVueJS 单选按钮 (b-form-radio) 保持未选中状态
【发布时间】：2021-07-08 05:41:32
【问题描述】：

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

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

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

【问题讨论】：

您粘贴的代码在某些组件上缺少结束标记。
不知道为什么，当我尝试编辑帖子时，我看到了所有结束标签，但是当我保存时，代码被修剪了。这是所有标签都关闭的版本 - pastebin.com/2ZxA0iyE
我编辑了帖子以修复它。如果您现在尝试编辑，您可以看到我是如何修复它的。

标签： vue.js radio-button bootstrap-vue checked

【解决方案1】：

我认为您可以在这部分代码中使用更简单、更灵活的代码。我在codepen中模拟您的情况以找到您的问题。我认为你不应该在b-form-radio 中同时使用:checked 和:value。我与您分享我的代码，也许它会帮助您理解。我建议将您的脚本部分放在问题中。

请注意，我使用超时来显示您的请求和响应之间的延迟。

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>

【讨论】：