将 Firebase 值推送到下拉菜单

Posted 2023-02-22

【中文标题】将 Firebase 值推送到下拉菜单

【英文标题】：Push Firebase Value to Dropdown

【发布时间】：2018-05-03 16:02:18

【问题描述】：

我正在使用 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 将值推送到下拉列表...但它没有填充。

【问题讨论】：

你在哪里设置itemsPhone？

嗨弗兰克！我刚刚添加了代码。我还是被困住了。如果您有任何想法，请告诉我。谢谢:)

我不是 Frank :)，您希望将下拉菜单设置为您从 firebase 获得的值吗？

大声笑我怎么能错过那个..！没错！！

【参考方案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>

在另一个问题上，您的代码过于冗长，因为您使用的是粗箭头函数 (=>)，因此无需设置 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();
         );

【讨论】：

@Fatman..刷新并更改值..我收到一个错误：“无效的道具：道具“标签”的类型检查失败。预期字符串，得到对象。”

错误说明，它需要一个字符串，但您从 firebase 获得了一个对象。 console.log 对象，以便您可以探索它的结构，然后设置适当的属性而不是整个对象

再次感谢！如果有人想知道， :label="telephoneType1.text" 在记录对象后工作。