Use vue-resource within vueify component

Question

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>

Eric McCormick · Accepted Answer · 2016-04-08 15:35:04Z

7

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');

edited Apr 8, 2016 at 15:35

Eric McCormick

2,7332 gold badges22 silver badges38 bronze badges

answered Oct 28, 2015 at 16:10

Matthias Weiß

5081 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

FerchoCarcho Over a year ago

Where are you requiring the vue-resource? can you share the code?

Matthias Weiß Over a year ago

I edited the answer and everything should be answered right there. The main.js file is my starting point for browserify in laravel elixir.

FerchoCarcho Over a year ago

it is helpful! you know there arent many examples about this matter.

Matthias Weiß Over a year ago

I'm glad I could help, and yes unfortunately there aren't many examples for vueify.

iamkristher Over a year ago

Thank you so much for the answer . I've been scratching my head to make this work using vueify

eurobob · Accepted Answer · 2016-02-10 07:53:52Z

3

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

this.$http.get(...

answered Feb 10, 2016 at 7:53

eurobob

2311 gold badge4 silver badges18 bronze badges

1 Comment

Matthias Weiß Over a year ago

Thanks for your answer, you're right but for some reason it didn't work like that back then although it should've.

Collectives™ on Stack Overflow

Use vue-resource within vueify component

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related