undefined Variable in VUE-Komponente

Question

Aus irgendeinem Grund kann ich auf this.id in meinem Methoden-Abschnitt zugreifen, aber nicht in meinem Datenabschnitt. Ich habe einige Beiträge zu den Nuancen des Schlüsselworts this gelesen, konnte aber nicht herausfinden, warum this.id in meinem Datenabschnitt undefined ist. Hier ist der Code:

calendar.vue (die wichtigen Teile):

export default { 
    name: 'calendar', 
    data() { 
     return {  
     eventSources: [ 
     // your event source 
      { 
       url: 'http://localhost:3000/getAppointments', 
       type: 'GET', 
       data: {  
        id: this.id //this.id is undefined 
       }, 
      } 
     ], 
     selected: {}, 
     val: [], 
     id: this.$store.getters.user, 
     }; 
    }, 
    methods: { 
     getApts: function(){ 
     this.$http.get('http://localhost:3000/getAppointments?id='+this.id) 
     //here this.id is defined 
     } 
    } 
}; 

Answer 1

Wenn die Daten-Funktion aufgerufen wird Ihre Vue, innerhalb der Datenfunktion zu initialisieren, wird this an die Vue gebunden. Im obigen Code gibt es keine id Eigenschaft des Vue, da Vue alle von Ihnen definierten Dateneigenschaften anfügt. Deshalb ist this.idundefined.

Ich würde vorschlagen, Sie verwenden nur

data() { 
    return {  
     eventSources: [ 
     // your event source 
     { 
      url: 'http://localhost:3000/getAppointments', 
      type: 'GET', 
      data: {  
      id: this.$store.getters.user 
      }, 
     } 
     ], 
     selected: {}, 
     val: [], 
     id: this.$store.getters.user, 
    }; 
    }, 

Answer 2

Sie den Wert setzen können Sie in eine Variable wollen und verwenden. Auf diese Weise müssen Sie Ihren Code nicht kopieren, wenn Sie die ID aus dem Store erhalten.

data() { 
    const id = this.$store.getters.user; 
    return {  
     eventSources: [ 
     // your event source 
     { 
      url: 'http://localhost:3000/getAppointments', 
      type: 'GET', 
      data: {  
      id, 
      }, 
     } 
     ], 
     selected: {}, 
     val: [], 
     id, 
    }; 
    },