I am doing a fetch() request followed by then() function. I want to set the property of my component from inside the then() function. See below in the code this.h_editBut = true;. It is not updating the h_editBut property of the component. How to do this?
Vue.component('users-row', {
props: ['row'],
data: function() {
return {
h_editBut: false,
fName: '',
lName: '',
userDetails: ''
}
},
template: ` <li>
<div>{{row.id}}</div>
<div>{{row.fname}}</div>
<div>{{row.lname}}</div>
<div><button @click="fName=row.fname; lName=row.lname; editRow();" v-bind:class="{ishidden:h_editBut}">Edit</button></div>
<div v-if="h_editBut">
<input v-model="userDetails">
</div>
</li>`,
methods: {
editRow: function() {
fetch("http://localhost/pr2/web_service/users/details?fname=" + this.fName + "&lname=" + this.lName).then(function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
return response.json();
}).then(function(result) {
this.h_editBut = true;
}).catch(function(err) {
console.log('Fetch Error :-S', err);
});
}
}
});
