在云 firebase 中显示下拉 Vue js 和类星体

Question

早上好，我如何获得一个 firebase 数组并将其显示在 Vue js 的下拉列表中我目前有这个我已经看过你的文章，但事实无法显示数组的数据，我也不知道如何编辑它们以便可以添加更多但主要是在下拉列表中显示我从 firebase 调用的数据<template>  <div class="q-pa-md">    <div class="q-gutter-md row items-start">      <label>laboratorios</label>      <input v-model="laboratorios" type="text" class="form-control" />      <q-btn color="primary" @click="guardarLab()" label="Primary" />      <q-select        filled        multiple        clearable        use-input        use-chips        option-label="laboratorios"        v-model="lab"        :options="labs"        style="width: 250px"      />      <!-- <select v-model="lab">        <option v-for="(item, index) in labs" :key="index" v-html="item.laboratorios"></option>      </select>-->    </div>  </div></template><script>import { db } from "boot/firebase"; // no olvidar importar dbexport default {  data() {    return {      laboratorios: "",      nombre: null,      lab: null,      multiple: null,      labs: []      /* labs:[        'glicemia','colesterol','trigliceridos','hemograma','perfil lipidico'      ], */    };  },  created() {    this.leerDatos();  },  methods: {    // listar laboratorios de la bd firebase    async leerDatos() {      try {        const restDB = await db.collection("laboratorios").get();        restDB.forEach(res => {          console.log(res.id);          const laboratorio = { laboratorios: res.data().laboratorios };          this.labs.push(laboratorio);        });      } catch (error) {        console.log(error);      }    },    // guardar laboratorio    guardarLab() {      var lab1 = { laboratorios: this.laboratorios };      this.labs.push(lab1);    }  }};</script>最后它向我抛出这个enter image description here 我在 Cloud Firestore 数据库中的是这个enter image description here

Answer 1

您不是传递单个 laboratorios，而是传递数组。这应该可以解决问题：

GUI:

<select v-model="lab">

    <option :value = "labItem" v-for = "labItem in labs">{{labItem}}</option>

</select>

数据：

created(){

    // LISTEN FOR LIVE UPDATES

    db.collection("laboratorios").onSnapshot(labs=>{

        // CONCATENATE THE ARRAYS OF EACH DOCUMENT INTO ONE ARRAY AND ASSIGN IT TO VUE DATA.

        this.labs = labs.docs.reduce((x,y)=>{

            return x.concat(y.data().laboratorios);

        }, [])

    })

}