VUEコンポーネントの未定義変数

Question

何らかの理由で、私のメソッドセクションでthis.idにアクセスできましたが、私のデータセクションにはアクセスできませんでした。私はthisキーワードのニュアンスについていくつかの記事を読んだが、私のデータセクションにがundefinedである理由を理解することができなかった。ここでは、コードされています

calendar.vue（重要な部分）：データ機能は、あなたのVueを初期化するために呼び出され

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

は、データ関数の内部、thisはVueのにバインドされます。上記のコードでは、Vueは定義したすべてのデータプロパティをアタッチしているため、Vueのプロパティはidではありません。そのため、this.idはundefinedです。

私はあなただけあなたが変数に必要な値を入れて、それを使用することができます

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

を使用することをお勧め。この方法では、店舗からIDを取得する場所でコードを複製する必要はありません。

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