3

我似乎无法让 vue-resource 与 vueify 一起工作。我已经定义了一个 vue 组件，我将它包含在我的 main.js 文件中。

import Vue from 'vue'
import MyComponent from './my-component.vue'

new Vue({
    el: '#app',
    components: {
        myComponent: MyComponent
    }
});

我的 vue 组件文件如下所示：

<script>
    import Vue from 'vue';
    // import VueResource from 'vue-resource'
    // Vue.use(VueResource);

    export default {
        template: '#my-component-template',

        created: () => {
            Vue.$http.get('/my/api/123',
                data => {
                    console.log(data)
                }, err => {
                    console.log("Error");
                    console.error(err);
                }
            );
        }
    }
</script>

在当前状态下，我收到此错误：

Uncaught TypeError: Cannot read property 'get' of undefined

如果我在组件文件中注释掉关于 vue-resource 的两行，我收到的错误会变成这样：

Uncaught TypeError: Cannot redefine property: $url

包.json：

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.6",
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-vueify": "^1.0.3",
    "vue": "^1.0.25",
    "vue-resource": "^0.8.0"
  }
}

吞咽文件：

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.browserify('main.js');
});

关于 SO 的所有现有答案都没有带来任何结果。请帮忙。

4

3 回答 3

4

您应该替换$http为http：

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

Vue.use(VueResource)

export default {
  created: () => {
    Vue.http.get(...)
  }
}

此外，最好将其安装VueResource到main文件中，然后我们可以使用this@Jeff 所说的关键字。

为此，您应该更改arrow function, 因为this指的是全局对象：

// refers to the global object
created: () => {}

// refers to the Vue component
created () {
  this.$http.get(...)
}
于 2016-06-22T19:39:19.057 回答
3

您是否尝试过添加var VueResource = require('vue-resource');根 vue 实例？还添加Vue.use(VueResource).

于 2016-06-22T16:56:43.650 回答
1

main.js在using中添加插件后Vue.use(VueResource)，它会将$http属性添加到所有 Vue 实例。您无需在组件文件中重新执行此操作。然后你只需使用this.$http：

    created: () => {
        this.$http.get('/my/api/123',
            //...
        );
    }
于 2016-06-22T12:50:01.697 回答