CODEWITHSUNDEEP
webpackvue.jscomponentsvue-resource
Sommer
Sommer

Reputation: 1418

Cannot read property 'post' of undefined vue

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) {

            })
            ...

Upvotes: 2

Views: 15741

Answers (2)

Daniel Santos
Daniel Santos

Reputation: 457

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.

Upvotes: 0

Sommer
Sommer

Reputation: 1418

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!

Upvotes: 12

Related Questions