Vue2 - 更新对象的方式与删除相同

Question

有没有办法像使用 Vue.delete 一样更新属性？

我有这个方法：

let element = event.target
                    let url     = '/admin/services/changePriorityStatus/' + element.dataset.id

                    this.$dialog.confirm('Are you sure you want to change priority status of this service?',{
                        loader: true
                    }).then((dialog) => {

                        axios.post(url, {
                            id:       element.dataset.id,
                            priority: element.dataset.priority
                        })
                        .then((response) => {

                            let data = response.data
                            dialog.close()

                            let serviceIndex = this.services.findIndex(service => serviceID)

                            Vue.delete(this.services, serviceIndex);

                            Event.$emit('message:show', {
                                messageTitle: data.messageTitle,
                                messageText:  data.messageText
                            }, data.class)
                        })
                        .catch((error) => {

                            alert('Something went wrong. Please try again a bit later')
                            dialog.close()
                        })

                    })
                    .catch(() => {
                        console.log('Changing status canceled')
                    });

如果可能的话，我想用一些全局更新方法替换 Vue.delete。有没有办法做到这一点？

Answer 1

是的，Vue.set。但是，只有在向对象添加新属性时才需要它，而不是在更新已经反应的属性时。

更多信息请见https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats：

变更检测注意事项

由于现代 JavaScript 的局限性（以及放弃 Object.observe)，Vue 无法检测到属性添加或删除。 由于 Vue 在执行 getter/setter 转换过程 实例初始化，属性必须存在于数据对象中 以便 Vue 对其进行转换并使其具有反应性。

Vue 不允许动态添加新的根级响应式 属性到已经创建的实例。然而，有可能 使用Vue.set(object, key, value) 方法向嵌套对象添加反应属性。