VUE - axios Post not working

Question

I want to do ajax call of VUE.JS which can be done by axios. I am doing this call from JS file and below is code, what i tried so far.

    <div id="VueCalling">    
        <div class="container">
            <label>Please enter thought </label>
        <input type="text" id="txtThought" class="form-control textboxCustm" v-model="textThought" />
        </div>
        <input type="button" class="btn btn-info" id="btnInsert" value="Insert JS" v-on:click="greet" />
        <br />
        <br />

        <a href="ReadThought.aspx" class="btn btn-primary">Read all thoughts</a>
    </div>
</asp:Content>

This was my HTML code and now as below mentioned JS code.

new Vue({
    el: '#VueCalling',
    data: function () {
        return {
            textThought: null,
            checkbox: null,
            text: null,
        }
    },
    methods: {
        greet: function (event) {
            // `this` inside methods points to the Vue instance
            var passedEmail = this.textThought;
            // `event` is the native DOM event
            axios.post('Default.aspx/InsertThoughtMethod?Thought="' + passedEmail + '"',
    {
        headers: {
            'Content-type': 'text/xml; charset=\"utf-8\"'
        },
    }, function (data) {
        alert(data);
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
        }
    }
});

This is my code behind method:

[WebMethod]
    public static bool InsertThoughtMethod(string Thought)
    {
        return true;
    }

I have checked console and network logs. It is giving this error. Network Log

The debugger is not reaching till the method. I can not move further.

Is the greet method executed? (you can add a console log). Then open your browser dev tools and check if a http post is sent on click. And also tell us the response from server. (404, cross site scripting, ...) — user1497119
Instead of doesn't work a more detailed explanation would be useful. While debugging ajax requests, the following details are often good to check: Is the request sent in the first place, if yes what is the status code. If you set a breakpoint on the controller, do you receive the request there or not? — Lassi Uosukainen
Pardon for that. I have edited question and added more details — Prihaan
500 indicates an "Internal Server Error". So there is nothing wrong with your axios POST request. You should check the logging of your server. — puelo
Hey @puelo .. Yes, You are right. But thing is that i have kep a debugger at the destination and that is not reaching. Without reaching there its giving 500 — Prihaan

Rush.2707 Rush.2707 · Accepted Answer · 2018-07-24T05:44:11

I worked on this code and found a solution. Below code does work well. I checked.

new Vue({
el: '#VueCalling',
data: function () {
    return {
        textThought: null,
        checkbox: null,
        text: null,
    }
},
methods: {
    greet: function (event) {
        // `this` inside methods points to the Vue instance
        var passedEmail = this.textThought;

        // `event` is the native DOM event
        axios.post('Default.aspx/InsertThoughtMethod', { Thought : passedEmail }).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
    }
}
});

VUE - axios Post not working

1 Answers