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를 대상으로 드롭 다운에 값을 밀어 자바 스크립트 바닐라 등 많은 방법을 시도 ...하지만 채우지 않습니다.

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> 

다른 문제에 당신이 (지방 화살표 기능을 사용하고 있기 때문에, 당신의 코드는, 지나치게 장황 =>) that=this을 설정할 필요가 없습니다, 지방 화살표 기능은 당신을 위해 this의 맥락을 유지, 그래서 당신은 코드를 변경할 수 있습니다 당신은`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(); 
     }); 


}