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

Posted 2023-02-22

【中文标题】在云 Firebase 中显示下拉 Vue js 和 quasar

【英文标题】：show dropdown Vue js and quasar in cloud firebase

【发布时间】：2020-11-22 04:46:28

【问题描述】：

早上好，我如何获取一个 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 数据库中的内容是 thisenter image description here

【参考方案1】：

您不是传入单个实验室，而是传入数组。这应该可以解决问题：

图形界面：

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

【讨论】：

这太不可思议了，我真的相信我永远不可能做到这一点，根据你的经验，我应该学习，因为很难找到云 Firebase 教程

和vue js教程

@dudeiale 不用担心。只要不断学习和挑战自己。最终，您将继续寻找更有效/更易读的方法来编写代码。最终，这是一个不断学习的曲线。我建议您继续构建更多有趣的工具和应用程序。祝你好运！

早上好，一个问题。你用 firebase 回答了一个问题，你告诉我，根据经验，事实是我住在哥伦比亚，而这里的经验几乎为零，因为我们非常落后。我的问题是，你无法了解我如何学习，帮助你在一个项目或类似的事情中获得我需要的经验，我不会为此向你收费，我非常希望能够提供帮助您在任何项目中都没有其他方式可以通过 facebook 或 Skype 与您取得联系。我的邮箱是 [e-mail]