无法在 Axios 成功回调中更新 Vue 对象的属性

Question

我有 axios 回调，我想更新 vue 对象的属性，我在input标签和edited属性之间有 2 路绑定，以便根据edited属性隐藏或显示文本框。 当我在回调中edited属性更新为 false 时，文本框不会被隐藏。 但是当我更新 axios 外部回调时文本框被隐藏或显示。

editBtnClicked: function (index) {
var promise = null;
axios.put('/rest/project', this.projects[this.currentIndex]).then(response => {
// textbox won't be hidden or displayed even if this statement is executed.
this.projects[this.currentIndex].edited = !(this.projects[this.currentIndex].edited);
});
// textbox is hidden or displayed when this statement is excuted.
// this.projects[this.currentIndex].edited = !(this.projects[this.currentIndex].edited);
}

谁能告诉我为什么？你可以检查完整的代码：https://gist.github.com/inherithandle/e61a5ab2809581a5d36de08b4e4349f1

Answer 1

我的观点是，这是由数组中project项的属性edited动态添加到project引起的<projectsbr=" />将属性添加到Ojbect

将属性添加到对象时，必须使用$set。

由于现代JavaScript的局限性(以及Object.observe的放弃(，Vue无法检测到属性的添加或删除。 但是，可以使用 Vue.set(object， key， value( 方法向嵌套对象添加响应式属性：

请尝试以下代码中的line 181和其他行，这些代码会更改 github 源代码中project项edited。

this.$set(this.projects[this.currentIndex], 'edited', false);

Answer 2

你的currentIndex总是0，你的两个if语句总是返回false。