在vueify组件中使用vue-资源

Question

我想在vueify组件的脚本标记中使用vue资源$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')。我真的没有想过这一点，因为我对浏览器/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

FYI，对于您的.vue文件，您不必要求Vue。相反，您可以像下面这样引用实例：

this.$http.get(...