首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >当外部库添加未定义属性时,Vue不会检测到更改。

当外部库添加未定义属性时,Vue不会检测到更改。
EN

Stack Overflow用户
提问于 2018-10-17 09:53:08
回答 1查看 465关注 0票数 4

我正在尝试制作一个表单呈现器,但是在正确获取表单内容更新时遇到了问题。我创建了一个带有最小版本的沙箱:https://codesandbox.io/s/23z4y1n9kp

问题

该表单有三个字段:abc。它是用一个a值和一个b值初始化的,但是c没有。当我更新ab的值时,我也会看到表单内容的更新,在控制台中,我看到setter方法被用正确的值调用。但是,当我为c填写一个值时,页面中似乎什么也没有发生,但是控制台表明setter被正确调用。这意味着document对象得到了正确的更新,但是Vue并不知道它。

外部库调用setter

我理解Vue不能查看未定义的属性或检测新属性(https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)。你应该做Vue.set让Vue看着他们。但是,在这种情况下,这是不可能的,因为我使用了一个外部库,它执行值:docmod的实际设置。

我在沙箱中包含了一个库的最小版本,以便让您了解它的功能。正是这个库将字段的值添加到文档对象中。它使用特定的getter和setter来实现这一点,我希望保留这些getter和setter,以确保docmod保持预期的工作状态。

我不能做的事

  • 通过设置c来定义documentContent: { value: { a: '1', b: 'foo', c: '' }}。事先不知道会有哪些属性。
  • 更改docmod库以将Vue.set放在其中

可能的解决方案

是否有一种方法可以让Vue监视整个文档对象并检测没有初始值的字段中的更改?假设,docmod可以通知我更改了什么,我可以强制Vue以某种方式更新它的页面吗?我是否可以重新定义值的对象属性,用调用Vue.set的代码包装原始的getter和setter?

任何帮助都是非常感谢的!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-17 10:25:51

您可以调用this.$forceUpdate();强制Vue更新屏幕。这不是建议的做事方式,但在你的情况下,我真的看不到任何其他。

参见此处更新的版本:https://codesandbox.io/s/zk4vy6qly3

我在您的Form.vue中添加了一个方法Form.vue,它绑定到文本框的@input中。此方法调用this.$forceUpdate();以使Vue重登。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52852002

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档