在云 firebase 中显示下拉 Vue js 和 quasar

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

最后它向我抛出了这个在此处输入图像描述我在 Cloud Firestore 数据库中拥有的是在此处输入图像描述

Answer 1

您不是通过单个实验室，而是通过 arrays。 这应该可以解决问题：

图形用户界面：

<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);
        }, [])
    })
}