在Vue.js中,有方法; Vue.set 用于添加,Vue.delete 用于删除,但对于“更新”,没有 Vue 方法,而是使用 Object.assign。实际上,如果嵌套对象没有变化,这工作得很好。 Vue 中是否有更新或刷新之类的功能,因为我在 Chrome Vue 扩展选项卡中看到状态发生了变化,但在网页中没有看到变化。
Vue View 不会触发更新。
示例:当我向“房屋”添加一个项目时,我在页面上看不到新房子,即使我可以通过检查 Vue 看到新项目,状态。重新加载页面时我可以看到新项目。
"clients": {
"oES4H0IMsYaCvGkSDKLmXkOkgXR2": {
"CL_937fef22-cee7-4b14-9e4d-4e6751c82dab": {
"name": "Adina Dowless",
"email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7617121f18171219011a13050536021305025815191b" rel="noreferrer noopener nofollow">[email protected]</a>",
"phone": "(547) 515 53 91",
"houses": {
"0": {
"name": "sugarless",
"uavt": "832677187473",
"housePolicyId": "PO_7f12d27f-245b-41a6-92b4-dacb0256ccac",
"daskPolicyId": "PO_f5fba094-7272-41f8-a406-f9251df5a37f"
},
"1": {
"name": "intersexualism",
"uavt": "931095588844",
"housePolicyId": "PO_2d6b79d2-53a0-42f9-8445-df06c3b3bc5a",
"daskPolicyId": "PO_79f37178-0714-4c19-aa24-204ea3cf30e7"
}
}
},
}
编辑:我正在使用 Quasar Framework、Vuex 库和 Firabase 实时数据库。
所以这个客户端对象位于 vuex 存储中,初始数据来自 Firebase 数据库。
添加客户端时:Vue.set(state.clients, Payload.id, Payload.client)
删除客户端时:Vue.delete(state.clients, id)
更新客户端时:Object.assign(state.clients[payload.id], payload.updates)
在添加、删除或更新客户第一级属性(例如姓名或电子邮件)时,这些功能可以正常工作,
在Houses中添加新房子时,会触发客户端的firebase数据库child_changed回调,所有数据都更新了,但网页中的组件没有更新。
最佳答案
您不需要特殊的方法来进行更新。这就是 Vue
本身所做的事情。但是 Vue
仅跟踪创建组件时出现的键。
Vue 不会跟踪向现有对象添加新属性。
您需要使用Vue.set在对象上添加新属性时,Vue 也知道要跟踪新属性。
所以我认为你应该在 house
对象上使用 Vue.set
,或者使用 Object.assign
创建一个新对象。
旁注:似乎您正在使用 houses
作为对象,而将其作为数组可能更好。如果将其更改为数组并使用 Array.push ,那么 Vue 将跟踪更改。如果您想将新项目分配给特定索引处的数组,您应该使用 Vue.set for arrays .
关于vue.js - 在 Vue.js 中,当通过嵌套对象中的更新更改状态时,网页不会更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60967783/