Cannot read property 'post' of undefined vue

Question

Thanks for reading my question.

I have read about my problem

VUE JS 2 + WEBPACK Cannot read property 'get' of undefined VUE RESOURCE

But my system no read Vue var :(

I have a vue component calls app.vue and i need to use vue-resource to get data from my post. But the error a lot times is:

TypeError: Cannot read property 'post' of undefined
at VueComponent.loadingProcess

Do u have ideas to solve it?

My app.vue

<script>
    var Vue = require('vue');
    //Vue.use(require('vue-resource'));
    //Vue.use();

    export default {
          data () {
                return {
                    msg: 'Hello from vue-loader! nice!',
                    user: {}
            }
    },
    mounted: function () {
        this.loadingProcess();
    },
    methods: {
        loadingProcess: function () {

            var urlPost;
            var answQSend = {...};
            var that = this;

            var jsonSend = {
                "form_data": answQSend,
                "prod_id": 3
            };

            Vue.$http.post(urlPost, jsonSend, {
                "headers": {
                    "content-type": "application/json"
                }
            })
            .then(function(response) {

            })
            ...

Thanks in advance!

Answer 1

First of all, thanks to @Bert who was patient and helped me find the solution

In my main.js, i changed this line

var VueResource = require('vue-resource');

for

import VueResource from "vue-resource"

and use

Vue.use(VueResource);

Then, in my app vue component i changed

Vue.http.post

For

this.$http.post

That way we fixed the error!

Answer 2

You were using export default script, therefore your this keyword, does not have access to the Vue instance original module, but to an imported object component. The most likely scenario is that with require, vue-resource is only available to that original module, so using import VueResource from "vue-resource", with the es6 syntax the vue-resource library is hoisted with an internal module, before it is evaluated and cached on the browser alongside the Vue instance. In some cases people don't use arrow functions and get out of scope. Another alternative would be to use the Vue instance itself instead of exporting a default object. Check out http://voidcanvas.com/import-vs-require/ you can probably get more out of it than i did.