Firebaseの値をドロップダウンにプッシュ

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


} 

私は正確なクラスやIDを標的とすることで、ドロップダウンに値をプッシュするjavascriptのバニラを含む多くの方法を、試してみました...しかし、それは移入されません。

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> 

別の問題であなたは（脂肪矢印機能を使用しているので、あなたのコードは、過度に冗長ですあなたは `itemsPhone`を設定している

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


}