показать раскрывающийся список Vue js и квазар в облачной firebase - PullRequest
Новая
       20

показать раскрывающийся список Vue js и квазар в облачной firebase

0 голосов
/ 01 августа 2020

Доброе утро, как мне получить массив 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, это введите описание изображения здесь

1 Ответ

0 голосов
/ 03 августа 2020

Вы не передаете индивидуальную лабораторию ios, а вместо этого передаете массивы. Это должно решить проблему:

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