Quasar umd and select

[viniciusccarvalho]

Hi folks, I'm not sure what is going on here. I started a new project in UMD mode, and for some reason my selects are always showing [object Object] as the first entry (when empty) and as soon as I click on them the real object pops up:

<div><q-select filled v-model="selectedPublication" :options="publications" label="Publications" option-value="id" option-label="name" @update:model-value="loadMagazines()"></q-select></div>

 data() {
            return {
                currentPage: 0,
                selectedPublication: {},
                selectedMagazine: {},
                magazines: [],
                publications: [],
                pages: []
            }
        }

Another related question: How can I format the option-label to print a formatted message like : "Issue $number, $formattedDate" where formatted date uses some momento.js date formatting to print the date.

Thanks

[suleimanas]

selectedPublication should be null, it shows [object Object] because you set the default value as {}.

about the formatting, maybe use "computed"

[viniciusccarvalho]

Is this behavior different than SPA? I have several other projects that are not UMD and I have always used the same pattern:
initialize the model with an empty object {}, on mounted load the initial array that populates the select.

[viniciusccarvalho]

I noticed that my former projects were all vue2, and I did not update to use ref(null) on the new quasar 2.x

  const { ref } = Vue
    const app = Vue.createApp({

        data() {
            return {
                currentPage: 0,
                selectedPublication: ref(null),
                selectedMagazine: ref(null),
                magazines: [],
                publications: [],
                pages: []
            }
        },

Solved the issue