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

by

0👍

✅

First of all, I would not recommend mixing Composition API and Options API together, unless you are progressively migrating from one to the other. It may confuse you like in this situation. You are returning reviewData directly from setup(), without making it a ref, reactive, etc. So, it stays as a static variable, thus clicking the controls don’t change anything. You need to make it reactive using 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>

Leave a comment