Qselect with async data defaulting to [object Object]



  • 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.



  • @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



  • 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" ??



  • @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. 🙂



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


Log in to reply