Qselect with async data defaulting to [object Object]

[bcoffield]

In my created() area I have a call to Firestore that fills a array I’ve setup in my data area named ebscoCachedSearchesController. It is an array of objects and I have the objects set properly to show in the qselect. When the select shows it displays as if an option has already been selected and that is [object Object]. However! When I click on the select I see all the options I expect to see and can click them and everything from that point works as desired.

How to I get rid of [object Object] and have the qselect be in its base state until I click on it?

 <q-card-section>
        <template v-if="ebscoCachedSearchesController.length > 0">
          <q-select
            dark
            :options="ebscoCachedSearchesController"
            v-model="ebscoTemp"
            filled
            label="Cached Search to Use"
          >
          </q-select
        >
        </template>
      </q-card-section>

In created():

   this.$firestore.collection("ebsco-searches").onSnapshot(querySnapshot => {
        this.ebscoCachedSearchesController = [];
        querySnapshot.forEach(doc => {
          let rObj = {};
          rObj.name = doc.data().searchTerm;
          rObj.label = doc.data().searchTerm;
          rObj.value = doc.data().searchTerm;
          rObj.id = doc.id;
          rObj.selected = false;
          this.ebscoCachedSearchesController.push(rObj);
          this.ebsco_a9h_loading = false;
        });

I’ve been digging a while and I just can’t figure it out. Thanks a lot for any help.

[dobbel]

@bcoffield

You’re code is not showing how you populate v-model="ebscoTemp".

In general, for people to help you, it’s best to create a codepen.io ( by extending an existing quasar example).

Here’s an example to customize the label of the q-select:
https://quasar.dev/vue-components/select#Example--Custom-label%2C-value-and-disable-props

[bcoffield]

Ha! Thank you very much! My problem was because I was initiating ebscoTemp as an empty object. I’m using that to process what is selected so that I can then update the database.

My original vanilla vue code has each item in the controller with a part of their object as a boolean named “selected” and I was using that to know what to put in the database.

Is there a way to tell q-select to, when selecting an item, change that boolean that is within :options="ebscoCachedSearchesController" ??

[dobbel]

@bcoffield

Is there a way to tell q-select to, when selecting an item, change that boolean that is within :options=“ebscoCachedSearchesController” ??

What boolean are your referring to? The rObj.selected ? If so there are multiple rObj objects with a corresponding selected boolean in ebscoCachedSearchesController. And you have only 1 q-select to potentially change multiple boolean values…

Btw if you reply to my message instead of just posting a message I will get an update that you replied.

[metalsadman]

@bcoffield either you should use emit-value and map-options or you are having a reactivity issue, then use vue.set().