In my project, I have a parent component and several child components which all make use of the same prop. This prop is an array of keys that are used for a dropdown menu in element.js. Initially, when the children render for the first time, they do not contain any data. However, once the keys are received via vuefire, the children populate with the dropdown menu items. Strangely, the element dropdown menu does not update as it should have. Upon inspecting the app using Vue dev tools, it is evident that the dropdown menu entries are being passed down correctly. The issue seems to resolve itself upon a hot reload triggered by file changes. Once the entries are successfully loaded, I am able to select the entry and everything functions as expected.
I encountered the same issue with both Vuetify dropdowns and HTML dropdowns.
Parent Component:
<template>
<div class="setup">
<h1>Setup</h1>
<div class="selectIngredients" v-for="number in 6">
<setupSelection :bottle="number" :ingredients="options" />
</div>
</div>
</template>
<script>
import {db} from "@/firebaseConfig"
import setupSelection from '@/components/setupSelection';
export default {
components: {
setupSelection,
},
firestore: {
options: db.collection('ingredients'),
},
};
</script>
Child Component:
<template>
<div class="ingredientSelector">
<h3>Select for Pump <span>{{bottle}}</span></h3>
<el-select v-model="selected" clearable placeholder="Select" >
<el-option
v-for="ingredient in ingredients"
v-bind:key="ingredient.text"
v-bind:label="ingredient.text"
v-bind:value="ingredient">
</el-option>
</el-select>
</div>
</template>
<script>
import {db} from "@/firebaseConfig";
export default {
props: {
ingredients: { required: true },
bottle: { type: Number, required: true },
},
data() {
return {
selected: ''
}
},
};
</script>
I anticipated that the dropdown menu would update automatically once the data was received by the client.
Thank you!