我正在尝试制作一个表单呈现器,但是在正确获取表单内容更新时遇到了问题。我创建了一个带有最小版本的沙箱:https://codesandbox.io/s/23z4y1n9kp
问题
该表单有三个字段:a、b和c。它是用一个a值和一个b值初始化的,但是c没有。当我更新a或b的值时,我也会看到表单内容的更新,在控制台中,我看到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?
任何帮助都是非常感谢的!
发布于 2018-10-17 10:25:51
您可以调用this.$forceUpdate();强制Vue更新屏幕。这不是建议的做事方式,但在你的情况下,我真的看不到任何其他。
参见此处更新的版本:https://codesandbox.io/s/zk4vy6qly3
我在您的Form.vue中添加了一个方法Form.vue,它绑定到文本框的@input中。此方法调用this.$forceUpdate();以使Vue重登。
https://stackoverflow.com/questions/52852002
复制相似问题