Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite
1

I'd like to use the vue-resource $http methods within the script tag of my vueify component but I always get this error: 

Uncaught TypeError: Cannot read property 'get' of undefined

My guess would be that the "this" keyword doesn't work (wouldn't know why) or the module isn't installed correctly (although it should be, checked that). My vue-component looks like this: 

<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>
share
up vote 6 down vote accepted

The answer was quite simple, I had to require('vue') in the component as well. I really did not think about this because I'm quite new to browser-/vueify.

The working code looks like this for anyone wondering:

<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>

EDIT: here is how I setup the whole dependencies and modules in my main.js file

// 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');
share
    
Where are you requiring the vue-resource? can you share the code? – FerchoCarcho Oct 31 '15 at 19:47
    
I edited the answer and everything should be answered right there. The main.js file is my starting point for browserify in laravel elixir. – Matthias Weiß Nov 1 '15 at 21:46
    
it is helpful! you know there arent many examples about this matter. – FerchoCarcho Nov 2 '15 at 11:44
    
I'm glad I could help, and yes unfortunately there aren't many examples for vueify. – Matthias Weiß Nov 3 '15 at 13:16
    
Thank you so much for the answer . I've been scratching my head to make this work using vueify – iamkristher Jan 2 '16 at 6:20
up vote 2 down vote

FYI, for your .vue file, you don't have to require Vue. Instead you can reference the instance like this:

this.$http.get(...
share
    
Thanks for your answer, you're right but for some reason it didn't work like that back then although it should've. – Matthias Weiß Feb 10 '16 at 22:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.