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将绑定到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,
    };
  },

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,
    };
  },

VUE组件中的未定义变量

2 个答案: