在 vueify 组件中使用 vue-resource

Question

我想在我的 vueify 组件的脚本标签中使用 vue-resource $http 方法，但我总是收到此错误：

Uncaught TypeError: Cannot read property 'get' of undefined

我的猜测是 "this" 关键字不起作用（不知道为什么）或者模块没有正确安装（尽管应该是，检查过）。我的 vue 组件如下所示：

<template>
    <!-- just displaying the data -->
</template>

<script>
    module.exports = {
        data: function () {
            return {
                foo: "bar"
            }
        },

        ready: function() {
            // the error occurs on the next line
            this.$http.get('/api/users', function(data){
                this.$set('users', data);
            });
        }
    }
</script>

Answer 1

答案很简单，我也必须在组件中 require('vue')。我真的没有考虑过这个，因为我对 browser-/vueify.

很陌生

对于任何想知道的人来说，工作代码如下所示：

<script>
    var Vue = require('vue');

    module.exports = {
        data: function () {
            return {
                message: "Hello World!"
            }
        },

        ready: function() {
            var _self = this;
            Vue.http.get('/api/users', function(data){
                _self.$set('users', data);
            });
        }
    }
</script>

编辑：这是我在 main.js 文件

中设置整个依赖项和模块的方式

// require dependencies
var Vue = require('vue');
var VueRouter = require('vue-router');
var VueResource = require('vue-resource');

// use vue-router and vue-resource
Vue.use(VueRouter);
Vue.use(VueResource);

// Laravel CSRF protection
Vue.http.headers.common['X-CSRF-TOKEN'] = document.getElementById('token').getAttribute('value');

// Routing
var router = new VueRouter();

var App = Vue.extend();

// start router in element with id of app
router.start(App, '#app');

Answer 2

仅供参考，对于您的 .vue 文件，您不必要求 Vue。相反，您可以像这样引用实例：

this.$http.get(...

在 vueify 组件中使用 vue-resource

Use vue-resource within vueify component

browserify

vue.js