尝试从 quasar 1 /vue 2 迁移时，无法在 quasar 2 / Vue 3 中选择选项组

Question

我正在尝试构建动态选项组。我已经找到并修改了使用旧版本的代码来实现我认为我需要的。问题是，当我尝试将此代码迁移到 Quasar2/Vue3 时，我不再能够 select 任何选项，而且我运行不知道下一步该去哪里。浏览器控制台没有提示可能出了什么问题。

<!DOCTYPE html>
<html>
  <!--
    -- https://quasar.dev/start/umd used as a base template
    -- https://codepen.io/cp-tof06/pen/xxGBzKr used for creating radio button groups. This is vue 2, though. 

  -->
  <head>
    <link href="https://cdn.jsdelivr.net/npm/quasar@2.6.1/dist/quasar.prod.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="q-app">

  <div class="row q-col-gutter-md q-pa-md">
    <q-option-group
      v-for="(data, index) in reviewData" :key="data.id"
      v-model="data.selected"
      :options="data.options"
      color="primary"
    ></q-option-group>
  </div>
  <div> Selected: {{ selected }}</div>
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@2.6.1/dist/quasar.umd.prod.js"></script>
<!-- old versions that work... 
  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/quasar@1.9.12/dist/quasar.umd.min.js'></script-->
    <script>
      /* ...when app initialization rows are changed to these 
new Vue({
  el: '#q-app',
  data() {  
   */
      const app = Vue.createApp({
        setup () {
  

        return {

        reviewData: [ 
            {
              id: 'group0',
              options: [
                {label: '1', value: 1},
                {label: '2', value: 2},
                {label: '3', value: 3}
              ],
              selected: null
            },
            {
              id: 'group1',
              options: [
                {label: '11',value: 11},
                {label: '12',value: 12},
                {label: '13',value: 13}
              ],
              selected: null
            }
              ]      
            }
        },
      computed: {
    selected() {
      return this.reviewData.reduce((acc, d) => ({ ...acc, [d.id]: d.selected }), {})
    }  
  }
      })

      app.use(Quasar)
      app.mount('#q-app')
    </script>
  </body>
</html>

Answer 1

首先，我不建议将组合 API 和选项 API 混合在一起，除非您正在逐步从一个迁移到另一个。在这种情况下，您可能会感到困惑。您直接从 setup() 返回 reviewData，而不是将其设为 ref、reactive 等。因此，它保持为静态变量，因此单击控件不会改变任何东西。您需要使用 Vue Reactivity APIs.

使其具有反应性

const { createApp, ref, computed } = Vue

const app = createApp({
  setup() {
    const reviewData = ref([
      {
        id: 'group0',
        options: [
          {
            label: '1',
            value: 1
          },
          {
            label: '2',
            value: 2
          },
          {
            label: '3',
            value: 3
          }
        ],
        selected: null
      },
      {
        id: 'group1',
        options: [
          {
            label: '11',
            value: 11
          },
          {
            label: '12',
            value: 12
          },
          {
            label: '13',
            value: 13
          }
        ],
        selected: null
      }
    ])

    const selected = computed(() =>
      reviewData.value.reduce(
        (acc, data) => ({
          ...acc,
          [data.id]: data.selected,
        }),
        {},
      ),
    )

    return {
      reviewData,
      selected
    }
  }
})

app.use(Quasar)
app.mount('#q-app')

<div id="q-app">
  <div class="row q-col-gutter-md q-pa-md">
    <q-option-group
      v-for="data in reviewData"
      :key="data.id"
      v-model="data.selected"
      :options="data.options"
      color="primary"
    ></q-option-group>
  </div>
  <div> Selected: {{ selected }}</div>
</div>

<link href="https://cdn.jsdelivr.net/npm/quasar@2.6.4/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.6.1/dist/quasar.umd.prod.js"></script>

尝试从 quasar 1 /vue 2 迁移时，无法在 quasar 2 / Vue 3 中选择选项组

Option Group can't be selected in quasar 2 / Vue 3 when trying to migrate from quasar 1 /vue 2

vue.js

quasar-framework