[Vuejs]-Parsing data from vue component with ajax

by

0👍

Usually, you should use this when scope is not changed, so within arrow function, it would be used like this: this.description.

However, when you use jQuery or some other external library, scope is changed, and this refers to other object then.

Solution is to assign Vue object to some new variable, that would be used then within changed scope. Also, make sure you have declared and defined your description either as a prop, or as a model: 

data(){
    return{
        description : '', //declare and define
    }
},
methods: {
    populate: ()=>{
        var self = this; //assigning Vue's this to self variable
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url:'/parametersByDescription',
            type: 'POST',
            data: {description: self.description}, //using it instead of this.
            success: function(data){
                self.store.parameter = data; //probably needed here too
            }
        })
        return;
    }
}

so in addition of providing description as model in component’s template: 

<input v-model="description"/>

Leave a comment