this.$http vueJs not set

Question

I'm playing with vueJS and trying to grab some data from an ajax request.

Heres my code:

new Vue({
el: '#recipeList',

ready: function () {
    this.fetchRecipes();
},

methods: {
    fetchRecipes: function () {
        this.$http.get('/recipes/ajax', function (recipes) {

            this.$set('recipes') = recipes;

        });
    }
}})

The html code is fine, I doubt you need to see that.

The documentation says that this is how you do a ajax request, however the $http object does not appear to be set.

Here is the console error I am receiving:

TypeError: undefined is not an object (evaluating 'this.$http.get')
fetchRecipesapp.js:10
(anonymous function)vue.js:307
readyapp.js:5
_callHookvue.js:8197
readyvue.js:10169
$mountvue.js:10155
_initvue.js:8054
Vuevue.js:80
global codeapp.js:1
app.js:10

Isaac Gregson · Accepted Answer · 2016-05-28 00:29:14Z

27

$http.get is for Vue Resource. Make sure you are pulling that in properly. i.e., add vue-resource to your package.json, then npm install, then...

var Vue = require('vue');

Vue.use(require('vue-resource'));

Also, make sure your root path is set up properly.

Vue.http.options.root = '/your-root-path';

Hope it helps! :-)

edited May 28, 2016 at 0:29

Isaac Gregson

2,0851 gold badge22 silver badges32 bronze badges

answered Oct 21, 2015 at 1:19

DonnaJo

5386 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

this.$http vueJs not set

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related