Hey there, I'm trying to figure out how to retrieve and display a Firebase array in a dropdown using Vue js. Here's what I currently have:
I've read some of your articles before, but I'm having trouble displaying the data from an array. I'm not sure how to edit them to add more data, but my main goal is to show the data retrieved from Firebase in a dropdown menu.
<template>
<div class="q-pa-md">
<div class="q-gutter-md row items-start">
<label>labs</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"; // don't forget to import db
export default {
data() {
return {
laboratorios: "",
nombre: null,
lab: null,
multiple: null,
labs: []
};
},
created() {
this.getLabData();
},
methods: {
// retrieving lab data from Firebase
async getLabData() {
try {
const dbData = await db.collection("laboratorios").get();
dbData.forEach(data => {
console.log(data.id);
const labData = { laboratorios: data.data().laboratorios };
this.labs.push(labData);
});
} catch (error) {
console.log(error);
}
},
// saving lab data
saveLab() {
var labInfo = { laboratorios: this.laboratorios };
this.labs.push(labInfo);
}
}
};
</script>
At the end, I'm encountering this issue: enter image description here. In my Cloud Firestore database, I have this data: enter image description here