vue.js - 在 Vue.js 中,当通过嵌套对象中的更新更改状态时,网页不会更新?

标签 vue.js quasar-framework

在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/

相关文章:

vue.js - 如何安装旧版本的vite

javascript - Vue.js 向父组件发射对象

javascript - 如何在 vue.js 中使用属性选择器?

javascript - 使用 Enquire.js 和 Vue.js 查询浏览器的大小

javascript - 为什么 npm 看不到类星体?

typescript - 类星体/电容器错误: ".../node_modules/http-proxy-middleware/dist/index has no exported member ' Config'"

javascript - 在 vue.js、quasar 框架中启用复选框检查功能

node.js - 为发射事件添加额外的参数 - Quasar

ios - 无法写入 Safari 上的输入字段

javascript - axios get 请求中出现意外 token