我正在执行fetch()请求,然后执行then()函数。我想从then()函数内部设置组件的属性。参见下面的代码this.h_editBut = true;。它不更新组件的h_editBut属性。该怎么做?
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);
});
}
}
});