Vue2 - 更新对象与删除相同

时间:2018-06-03 17:30:05

标签: vue.js vuejs2

有没有办法像使用 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 。有没有办法做到这一点?

1 个答案:

答案 0 :(得分:4)

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)方法将反应属性添加到嵌套对象。