在實例上未定義屬性或方法“ orgs”，但已引用

Question

我正在使用vue2，並且嘗試獲取api並呈現頁面中的內容，這全部在Orgs.vue文件中完成，並且代碼如下：

<template lang="html">
  <div class="">
    {{ orgs | json }}
  </div>
</template>

<script>
export default {
  data: {
    orgs: false
  },

  created() {
    request = axios({
      url: 'https://....',
      method: 'GET',
    })
      .then(function(response) {
        this.orgs = response;
      })
      .catch(function(error) {
        console.log('error getting orgs::', error);
      });
  }
};
</script>

<style lang="css">
</style>

但是，每次我運行頁面時，都會出現此錯誤：

屬性或方法“組織”未在實例上定義，但在渲染期間被引用。 確保在data選項中聲明反應性數據屬性。 在Orgs.vue中找到

我試圖改變

 data: {
    orgs: false
  },

至

 data() {
    return {orgs: false}
  },

但是錯誤仍然存​​在

Answer 1

發出請求之前，您需要在變量中保存vue實例引用，並使用它在響應處理程序中訪問vue。 我在示例中使用了vue_instance 。
並針對組件初始化data作為函數。

data: function() {
    return {
      orgs: false
    }
  },

  created() {
    var vue_instance = this;
    request = axios({
      url: 'https://....',
      method: 'GET',
    })
      .then(function(response) {
        vue_instance.orgs = response.data;
      })
      .catch(function(error) {
        console.log('error getting orgs::', error);
      });
  }

編輯：在axios響應處理程序中， this是window上的引用。 Axios對vue一無所知。