如何从多个q-radio组中收集选中选项的数据

需求：页面包含两组单选选项，需要分别收集每组的选中数据。

原代码问题 #

原代码中所有单选框绑定同一个modelOptions数组，导致整个页面只能选中一个选项，无法实现每组独立选择并收集数据。

修改后的实现代码 #

模板部分

<div id="q-app" style="min-height: 100vh;">
  <q-list>     
    <q-card
        v-for="(item, index) in boxs"
        :key="index"
        class="q-mt-xl"
        flat
        bordered
        square
      >
       <q-toolbar class="bg-blue-1 q-px-md q-py-xs text-bold">
         {{item.name}}
        </q-toolbar>
        <q-list
          class="fit"
          v-for="(option, index) in item.options"
          :key="index"
        >
          <q-item tag="label" v-ripple>
            <q-item-section avatar>
              <!-- 按组ID绑定对应的model -->
              <q-radio v-model="modelOptions[item.id]" :val="option" />
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ option.optionName }} </q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
    </q-list>
    <div class="q-pa-sm q-mt-sm">
      第一组选中: <strong>{{ modelOptions[1]?.optionName || '未选择' }}</strong><br>
      第二组选中: <strong>{{ modelOptions[2]?.optionName || '未选择' }}</strong>
    </div>
  </div>
</div>

数据定义部分

data () {
    return {
      // 改为对象，按组ID存储选中项
      modelOptions: {},
      boxs:[
        {
          id: 1,
          name: '第一组',
          options: [
             {optionName: 'A1', id: 1},
             {optionName: 'A2', id: 2},
             {optionName: 'A3', id: 3},
          ]
        },
        {
          id: 2,
          name: '第二组',
          options: [
             {optionName: 'B1', id: 10},
             {optionName: 'B2', id: 11},
             {optionName: 'B3', id: 12},
          ]}
      ]
    }
  }

核心修改说明 #

• 将modelOptions从数组改为对象，通过组ID作为键来存储对应组的选中项，实现组间选择独立
• 单选框的v-model绑定为modelOptions[item.id]，确保每组的选择不会互相干扰
• 展示选中结果时，通过组ID访问对象中的对应值，可直接获取每组的选中数据

内容的提问来源于stack exchange，提问作者jose