Vue-resource: Vue-Resource with Vue2.0 - Get Error

[gisu]

Hi i'm using now Vue 2.0 with Vue-Resources, Bundler is Browserify.

I bind vue-resource in the app.js

// Adding Vue Plugins
Vue.use(VueResource)

// Vue App
new Vue({
  render: h => h(App)
}).$mount('#app')

Than i use it on a compontent method

methods: {
      fetchContent() {
        this.$http.get('https://content.json', {

        }).then(response => {
          console.log(response)
        }, response => {
          console.log('Fetch Failed')
        })
      }
    },

But i get Uncaught TypeError: Cannot read property 'get' of undefined

Is there a new secret to bind Plugins on the app.js file? The actual solution is, that i import vue, vue-resource in the component and Vue.use(VueResource). Than it works but i think that can be the right solution.

[DCzajkowski]

I get the same thing. It seems like Vue 2.0 does not share parent's methods with children components. As a workaround for that I have been using this.$root.$http. That way you will be able to access $http on the Vue instance, not the VueComponent.

I am unsure whether or not this is a desired behaviour and how should it be treated, but that is what works as of right now for me.

Can @yyx990803 clarify please? That would be awesome :)

[gibex]

Same issue with webpack, no $http on this

[DCzajkowski]

I am using webpack too.

[steffans]

Can send me and full example, to reproduce this issue.

[guidobouman]

vue-cli -> scaffold -> add vue-resource -> try using vue-resource in a component

[DCzajkowski]

Yeah, so what seems like to happen is the following:
In my Vue 1.x app after the upgrade to 2.0 (using a webpack example boilerplate from the official distribution) removes the access to this.$http and everything this. connected. All of the methods available in the parent are not accessible through children components.
When using a new example app though, everything works fine.

Could it be the way we render child App component using render: h => h(App), instead of components: { App } that is causing the problem? I didn't have quite the time to check what could it be, but that seem to be the only difference I have in my code.

[DCzajkowski]

Theoretically it is Vue.use(VueResource) that should do the trick. Somehow, it doesn't.

Now, if I wasn't clear, it was working with Vue 1.0 as expected and only after the switch to 2.0 it stopped working (as many things, but those were expected). I have created a new webpack project (using the official template) and migrated the code (which I changed to work with 2.0) and, you guessed it, it works! Yay!
Is it the build.js or something that doesn't get updated, js/webpack being stupid or is it just me (and others who have the same problem)?

[guidobouman]

Can you post your package.json? Everything is working on my end. I am using this.$resource(), though.

{
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.23.0",
    "eslint": "^3.6.1",
    "eslint-config-airbnb-base": "^8.0.0",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-import-resolver-webpack": "^0.6.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-html": "^1.5.3",
    "eslint-plugin-import": "^1.16.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.4",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.12.0",
    "json-loader": "^0.5.4",
    "ora": "^0.2.0",
    "shelljs": "^0.6.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.3.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^9.5.0",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  }
}

[DCzajkowski]

I will try to set up a small project that reproduces the error. I don't want to share the whole production code (not that it is a secret or smth, but it would be quite unreadable) :)

[guidobouman]

Sure, a redacted package.json would go a long way, but a minimal reproduction of the error would be even better.

[guidobouman]

By the way, my mount is a bit different:

import Vue from 'vue';
import VueResource from 'vue-resource';
import App from './app';

Vue.use(VueResource);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App),
});

Would be a good bug if vue-resource doesn't work when initialising before mount.

[liuhedong]

import Vue from 'vue';
........
Vue.http.get(....).....

_is work!!!_

[DCzajkowski]

Ok. Finally I have set up a sample repo. Here is the link. Make sure to read the README file:
https://github.com/DCzajkowski/vue-resource-not-working

[LinusBorg]

Please read this:

http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

You use import Vue from 'vue/dist/vue' which messes up vue-loader's hot reloading (Development problem only): your components end up with a different instance of vue than the one you imported in main.js

see the link for the appropriate fix (simply add a line to the webpack settings).

[DCzajkowski]

Is this the only reason why this.$root.func() works and this.func() doesn't? If it is, then does @gisu have the same problem I have had?

[LinusBorg]

Yes, most probably that's the same issue

[DCzajkowski]

Does that solve op's problem? If so, the issue can be closed, I guess...

[jonatan2m]

I had this problem today.
The scenario is:
I created a method as you can see below:

getSurvey: () => {
     var parts = window.location.href.split("/");
     var id = parts[parts.length - 1];
     this.$http.get("Survey/GetSurvey/" + id)
           .then((res) => { this.Survey = res.body; });
}

after that I invoked in created hook:

created() {
    this.getSurvey();
}

In this way, I received an error, as described on issue.
But if I just put the code in the created hook, it is work:

created() {
    var parts = window.location.href.split("/");
    var id = parts[parts.length - 1];
    this.$http.get("Survey/GetSurvey/" + id)
            .then((res) => { this.Survey = res.body; });
}

Don't need to open this issue but I think to explain this scenario could help other people. :)

Updated
There is a problem with Arrow Functions. I forget that!
Arrow Function binds this to the parent context, in this case, the parent is a module context.

[steffans]

@jonatan2m You arrow function syntax is wrong there, try:

getSurvey() {
     var parts = window.location.href.split("/");
     var id = parts[parts.length - 1];
     this.$http.get("Survey/GetSurvey/" + id)
           .then((res) => { this.Survey = res.body; });
}

[werts]

@guidobouman thx a lot ,it really do the trick, the days headache ends