Javascript 属性或方法“；orgs“；未在实例上定义，但被引用

我正在使用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>

到

---

但是错误仍然存在

您需要在发出请求之前将vue实例引用保存在变量中，并使用它访问响应处理程序中的vue。我在示例中使用了

vue\u实例
。

对于组件init
data
as function

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响应处理程序
中，此
是
窗口上的参考。Axios对vue一无所知。
您是否尝试了
data:function（）{return{orgs:false}}
，如示例中可能重复的那样
 data() {
    return {orgs: false}
  },

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