Question

我想在我的vueify组件的script标签中使用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。相反，您可以像这样引用实例：

{{1}}

在vueify组件中使用vue-resource

2 个答案: