Vue Quasar - 异步数据默认为 [object Object] 的 Qselect

Posted 2023-02-22

【中文标题】Vue Quasar - 异步数据默认为 [object Object] 的 Qselect

【英文标题】：Vue Quasar - Qselect with async data defaulting to [object Object]

【发布时间】：2021-02-18 11:15:33

【问题描述】：

在我的 created() 区域中，我调用了 Firestore，它填充了我在名为 ebscoCachedSearchesController 的数据区域中设置的数组。它是一个对象数组，我已正确设置对象以在 qselect 中显示。 When the select shows it displays as if an option has already been selected and that is [object Object].然而！当我单击选择时，我会看到我希望看到的所有选项，并且可以单击它们，从那时起，一切都会按预期工作。

如何摆脱 [object Object] 并让 qselect 在我点击它之前保持其基本状态？

在模板中：

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

在 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;
    );

【参考方案1】：

问题是我正在 v-modeling 的东西是一个空对象开始。如果我用标签和值实例化它，它会显示开始。

【参考方案2】：

您只需使用 null 实例化您的模型 (ebscoTemp)。