Utilizing Vuetify to build a dropdown has been an interesting challenge for me. While I can successfully select a value and store it in the firebase database, I'm facing difficulties when it comes to repopulating the dropdown after page refresh.
Below is the template structure:
<template>
<v-select
v-bind:items="itemsPhone"
v-model="telephoneType1"
id="telephone-pro-type-1"
label="Select"
single-line
bottom
> </v-select>
</template>
<script>
export default {
data () {
return {
telephoneType1:'',
itemsPhone: [
{ text: 'Mobile' },
{ text: 'Emergency' },
{ text: 'Weekend' }
],
}
</script>
The code snippet below focuses on populating fields, although my attempts to populate the dropdown have proven unsuccessful.
mounted(){
var that = this;
var query = db.ref('Clients/'+ clientName +'/'); // shortened
query.once('value')
.then((snapshot) => {
that.emailPro = snapshot.child('emailPro').val();
that.telephoneType1 = snapshot.child('telephoneType1').val();
});
}
I've experimented with various methods, including vanilla JavaScript, trying to push values into the dropdown by targeting specific classes or IDs, but unfortunately, they don't seem to populate as expected.