How to update data of a VueJS instance from a jQuery AJAX call?
You have a scope issue of this.name
in your AJAX success handler.
The this.name
inside is not the same as this.name
in your Vue component. So your name is not getting set in the Vue component.
You may use arrow functions to get around this issue:
$.ajax({
url: 'http://elk.example.com:9200/users/user/' + this.id
}).done(data => {
this.name = data._source; // 'this' points to outside scope
this.name.valueset = true;
});
Similar answer: https://stackoverflow.com/a/40200989/654825
More info on Arrow functions: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions
not same scope for this.name
create_casenr: function(event) {
// update the full name of user
$.ajax({
url: 'http://elk.example.com:9200/users/user/' + this.id
})
.done(function(data) {
console.log(data);
this.name = data._source;
this.name.valueset = true;
console.log(this.name);
}.bind(this))
add a bind(this)