未捕获的类型错误：无法读取 VueJs 中未定义的属性“get”答案

【问题标题】：Uncaught TypeError: Cannot read property 'get' of undefined in VueJs未捕获的类型错误：无法读取 VueJs 中未定义的属性“get”
【发布时间】：2017-07-12 06:16:59
【问题描述】：

我有以下代码

<div id="vue-instance">

</div>

JS

var vm = new Vue({
  el: '#vue-instance',
  data: {
  },
  ready:function(){
    this.loadCountries();
  },
  methods:{
        loadCountries(){
            this.$http.get('https://restcountries.eu/rest/v1/all',function(data){
                console.log(data);
          })
      }
  }
});

当我运行上面的代码时，它给了我以下错误

未捕获的类型错误：无法读取未定义的属性“get”

我有一把小提琴

JsFiddle

非常感谢您的帮助

【问题讨论】：

您是否安装并配置了 vue-resource？
stackoverflow.com/questions/33247812/this-http-vuejs-not-set
@AmreshVenugopal 如何在 jsFiddle 上安装它？
Vue 资源已弃用。使用 Axios

标签： javascript vuejs2

【解决方案1】：

$http.get 来自Vue Resource。确保通过将vue-resource 添加到您的package.json 来正确地将其拉入，通过npm install 和代码安装它：

var Vue = require('vue');

Vue.use(require('vue-resource'));

要在小提琴中使用它，您必须在外部资源中添加 vue-resource cdn link 并在代码中使用以下代码：

Vue.use(VueResource)

查看工作演示：https://jsfiddle.net/49gptnad/187/

【讨论】：

如何在小提琴中做到这一点？我想做的只是一个 Ajax 调用还有其他方法吗？
尽管我看到错误消失了，但我仍然在控制台中看不到任何内容，并且我手动测试 url 工作正常
@Vikram 您的代码中还有一些错误，请参阅工作解决方案here。如有任何疑问，请告诉我。
如果您也可以更新答案中的链接，那就太好了。以便对其他人有用
@Saurabh 也许你可以帮助我。看看这个：stackoverflow.com/questions/52529345/…

【解决方案2】：

由于您没有 vue-resource 插件，因此您的 this.$http 未定义。要在 js-fiddle 上添加 Vue 资源，请将 https://cdn.jsdelivr.net/g/vue@2.0.0-rc.4,vue.resource@1.0.0 添加到外部脚本部分。

【讨论】：

【解决方案3】：

要使用 $http，您必须先安装 vue-resource 中间件。您可以使用以下命令进行安装。

npm install vue-resource --save

安装完成后，转到您的 main.js 文件并导入 vue 资源，如下所示

import vueResource from 'vue-resource'

现在它被导入了，所以我们只需要调用 Vue 的 use 方法来使用这个中间件。您可以如下调用 use 方法。

Vue.use(vueResource)

【讨论】：

【解决方案4】：

我修复了以下模式的这个问题：

npm install bootstrap-vue --save
npm install vue-resource --save

在 main.js 中

import Vue from './bootstrap'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

创建 bootstrap.js

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export { Vue }

在 App.vue 中

this.$http.get('/api/module/all').then(...

【讨论】：

【解决方案5】：

截至 2019 年 10 月，我使用了另一种方式。我首先像这样使用 NPM 安装

npm install axios --save

我后来在下面使用了这个，并且在下面这样做消除了错误。

import  axios  from 'axios';

【讨论】：