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

最后它向我抛出这个enter image description here 我在 Cloud Firestore 数据库中的是这个enter image description here

Answer 1

您不是传递单个 laboratorios，而是传递数组。这应该可以解决问题：GUI:<select v-model="lab">&nbsp; &nbsp; <option :value = "labItem" v-for = "labItem in labs">{{labItem}}</option></select>数据：created(){&nbsp; &nbsp; // LISTEN FOR LIVE UPDATES&nbsp; &nbsp; db.collection("laboratorios").onSnapshot(labs=>{&nbsp; &nbsp; &nbsp; &nbsp; // CONCATENATE THE ARRAYS OF EACH DOCUMENT INTO ONE ARRAY AND ASSIGN IT TO VUE DATA.&nbsp; &nbsp; &nbsp; &nbsp; this.labs = labs.docs.reduce((x,y)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return x.concat(y.data().laboratorios);&nbsp; &nbsp; &nbsp; &nbsp; }, [])&nbsp; &nbsp; })}