将 Firebase 值推送到下拉列表

Question

我正在使用 Vuetify 创建我的下拉菜单。我可以 select 一个值，将它推送到 firebase 数据库，但是刷新页面我无法填充下拉列表。

这是模板：

<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>

这是用于填充其他字段的代码，但我无法填充下拉列表。

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();
         });


}

我尝试了很多方法，包括香草 javascript 通过定位确切的 class 或 id 将值推送到下拉列表...但它没有填充。

Answer 1

label 属性用于设置默认值。目前您将其设置为 'Select'，而不是设置 telephoneType1 : 'Select

并将标签设置为该属性：

<v-select
         v-bind:items="itemsPhone"
         v-model="telephoneType1"
         id="telephone-pro-type-1"
         :label="telephoneType1"
         single-line
         bottom
> </v-select>

在另一个问题上，您的代码过于冗长，因为您使用的是粗箭头函数 (=>)，因此无需设置 that=this，粗箭头函数会维护 this 的上下文为你，所以你可以更改代码：

mounted(){  
  var query = db.ref('Clients/'+ clientName +'/'); // shortened 

  query.once('value')
         .then((snapshot) => {

                this.emailPro = snapshot.child('emailPro').val();
                this.telephoneType1 = snapshot.child('telephoneType1').val();
         });


}

将 Firebase 值推送到下拉列表

Push Firebase Value to Dropdown

javascript

firebase

vue.js

firebase-realtime-database

vuetify.js