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

Answer 1

$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! :-)