javascript - VUE 组件中的 undefined variable

Question

出于某种原因，我可以在我的方法部分访问 this.id，但不能在我的数据部分访问。我已经阅读了一些关于 this 关键字细微差别的帖子，但无法弄清楚为什么 this.id 在我的数据部分中是 undefined 。这是代码:

calendar.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

当调用数据函数来初始化你的 Vue 时，在数据函数内部，this 将绑定(bind)到 Vue.在上面的代码中，没有 Vue 的 id 属性，因为 Vue 正在附加您定义的所有数据属性。这就是为什么 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,
    };
  },