如何在 VueJS 中观察插入对象？

Question

我正在尝试在 Vue 中插入一个对象，但我不能...

data: {
    formValid: {},
    buttonIsDisabled: true,
    statusModal: 'active',
},
methods: {
    closeModal() {
        this.statusModal = ''
        this.formValid.test = "test"
    }

},
watch: {
    formValid: {
        handler(o, n) {
            console.log(o)
            console.log(n)
        },
        deep: true
    }
}

当我执行 'this.formValid.test = "test"' 时，我不会去 Watch，但是如果我将这个对象放入 formValid 并更改它，在这种情况下，我会去 Watch。

你知道我怎样才能得到这个活动吗？

Answer 1

您不能像这样使用 Vue2 动态地将反应属性添加到对象。 您需要在 data 中定义它们：

data: {
    formValid: {
        test: '',
    },
    buttonIsDisabled: true,
    statusModal: 'active',
},

或使用：
Vue.set(this.formValid, 'test', 'test');