Within my created() method, I am making a call to Firestore to populate an array called ebscoCachedSearchesController in the data section. This array consists of objects that are correctly configured to be displayed in the qselect component. However, when the select component is rendered, it initially shows [object Object] as if an option has already been selected. But upon clicking on the select, all the expected options appear and can be clicked as intended.
How can I eliminate the display of [object Object] and have the qselect remain in its default state until clicked?
In the template:
<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 the created() method:
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;
});