javascript - 无法在 axios 成功回调中更新 vue 对象的属性

Question

我有 axios 回调，我想更新 vue 对象的属性，我在 input 标签和 edited 属性之间有两种绑定(bind)方式，以便文本框是隐藏或显示取决于 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

我的意见是属性造成的edited的 project projects 中的项目数组被添加到 project动态地。
Adding property to Ojbect

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

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method:

请在 line 181 中尝试以下代码和其他更改 edited 的行的 project项目在你的 github 源代码中。

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