Question

我正在使用 Vuetify 来创建我的下拉列表。我可以选择一个值，将其推送到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();
         });


}

我尝试了很多方法，包括vanilla javascript，通过定位确切的类或ID来将值推送到下拉列表...但它不会填充。

Answer 1

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

并将标签设置为该属性：

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

在另一个问题上，你的代码过于冗长，因为你使用胖箭头函数（=＆gt;）而不需要设置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值推送到下拉列表

1 个答案: