页面上的bootstrap-vue N​​ b-form-radio，如何实现v-model

Question

bootstrap-vue

服务器端/JSON 向我发送单选按钮组的 N 个类别。将要求用户将每个类别的优先级分为高、中、低。我可以为每个类别动态生成单选按钮组，为用户提供优先级评分。

基于 N 个输入场景，如何生成/分配/声明/初始化 N 个类别中的每个类别所需的 N 个单独的 v-model 数据变量，以存储用户选择？

我试图在数据部分分配一个数组“prioritySelected”

  data() {
    return {     
      prioritySelected: [],      
    };
  },

然后 created() 调用 loadFormData()。在 loadFormData() 中，基于传入的 JSON，循环并在 prioritySelected 中创建了我需要的 N 个条目

    for (var i = 0; i < msnVals.length; i++){
        this.prioritySelected[msnVals[i].type] = '';
      }

然后将 v-model 设置为

    <div v-for="item in priorityRank" :key="item.value">
              <b-form-radio
                size="sm"
                style="font-size: 10px"
                v-model="prioritySelected[item.type]"
                :aria-describedby="ariaDescribedby"
                name="item.type"
                :value="item.value"
                >{{ item.text }}
              </b-form-radio>
           
            </div>

没有工作，想法？

Answer 1

您的初始 prioritySelected 属性似乎应该是一个对象而不是一个数组。
然后你可以像在循环中那样添加属性。

Answer 2

这就是我解决这个问题的方法。

我疯狂地用谷歌搜索并没有找到我的答案，所以我上周问了这个问题。感谢您的关注，但没有收到我可以使用的回复。从那以后我想出了一个答案，所以我想发帖——不仅是为了帮助其他人，也是为了征求反馈和进一步的灵感。

我有 5 个手风琴。每个手风琴有 5 到 15 个子手风琴。每个子手风琴有 3 个单选按钮组。总共 129 个单选按钮组。这些“三重奏”之一的图片。

每个子手风琴单选按钮组都是相同的，请为 3 个不同的类别选择您的优先级。手风琴部分和子手风琴部分来自服务器，所以我想动态组装这个区域。绊脚石是 name 和 id 必须是唯一的。

我为单选按钮组制作了一个组件。我传入 options 数组，这样我就可以显示我想要的任何项目。因为我不在乎名称和/或 ID 是什么，所以我使用 UUID 来生成名称和 ID - 这确保每个单选按钮组都是唯一的并且行为独立，这意味着数据变量“选定”仅适用于“此“ 零件。一旦用户选择了一个单选按钮，我就会将该信息发送给父级并提供足够的详细信息，以便我知道该值来自哪个手风琴/子手风琴/组，并可以存储它。

我可以通过 refs 标记清除所有 129 个单选按钮组，并使用 refs 数组的长度循环并为每个按钮调用子 onClear() 函数。

这是我的（子）组件。想法、反馈等感谢

<template>
  <b-form-group
    :label="label"
    v-slot="{ ariaDescribedby }"
    label-align="left"
    label-size="sm"
  >
    <b-form-radio-group
      ref="radioForm"
      :id="uuidv4()"
      v-model="selected"
      :options="options"
      :aria-describedby="ariaDescribedby"
      :name="uuidv4()"
      stacked
      @change="onSelectRadioButton"
    ></b-form-radio-group>
  </b-form-group>
</template>
<script>
export default {
  name: "RadioComponent",
  props: {
    component: {
      type: String,
      default: null,
    },
    subComponent: {
      type: String,
      default: null,
    },
    label: {
      type: String,
      default: null,
    },
    options: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      selected: "",
      reply: {
        component: this.component,
        subComponent: this.subComponent,
        label: this.label,
        item: [],
      },
    };
  },
  methods: {
    onSelectRadioButton(value) {
      this.reply.item = [];
      this.reply.item = this.options[value];     
      this.$emit("selected", this.reply);
    },
    onClear() {
      this.selected = [];
    },
    /**
     * function to generate UUID
     */
    uuidv4() {
      return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
        (
          c ^
          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
        ).toString(16)
      );
    },
  },
};
</script>

这是从父组件调用组件的样子，子组件发出到“选定”调用父组件的 radioButtonSelected 方法。当我从包含类别（项目变量）和子类别（条目变量）的 json 文件中读取信息时，这个片段实际上嵌入了几个循环中。我认为同样的方法可以用于复选框组

<b-collapse :id="'accordion-' + entry.id" role="tabpanel">
                <b-row
                  style="
                    padding-left: 20px;
                    padding-top: 4px;
                    padding-bottom: 4px;
                  "
                >
                  <b-col cols="4" style="font-size: 10px">
                    <PriorityRadioButtons
                      ref="radioBtnComponent"
                      label="PRIORITY"
                      :component="item.type"
                      :subComponent="entry.text"
                      :options="options"
                      @selected="radioButtonSelected"
                    />
                  </b-col>
                  <b-col cols="4" style="font-size: 10px">
                    <PriorityRadioButtons
                      label="RISK"
                      ref="radioBtnComponent"
                      :component="item.type"
                      :subComponent="entry.text"
                      :options="options"
                      @selected="radioButtonSelected"
                    />
                  </b-col>
                  <b-col cols="4" style="font-size: 10px">
                    <PriorityRadioButtons
                      label="PROXIMITY"
                      ref="radioBtnComponent"
                      :component="item.type"
                      :subComponent="entry.text"
                      :options="options"
                      @selected="radioButtonSelected"
                    />
                  </b-col>
                </b-row>
              </b-collapse>