Vue.js 外部库添加未定义的属性时，Vue不会检测到更改

我正在尝试制作表单渲染器，但在正确更新表单内容时遇到问题。我创建了一个具有最低版本的沙盒：

问题

表单有三个字段：

a

、

b

和

c

。它用一个值初始化为

a

，一个值初始化为

b

，而不是

c

。当我更新

a

或

b

的值时，我还看到表单内容更新，在控制台中，我看到setter方法被正确的值调用。但是，当我为

c

填写一个值时，页面中似乎没有发生任何事情，但控制台表明setter被正确调用。这意味着文档对象已正确更新，但Vue不知道

外部库调用setter

我知道Vue无法查看未定义的属性或检测新属性（）。您应该执行

Vue.set

以使Vue监视它们。但是，在这种情况下，这是不可能的，因为我使用了一个外部库来进行值的实际设置：

docmod

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

docmod

保持预期的工作状态

我不能做的事

• 通过设置

  documentContent:{value:{a:'1'，b:'foo'，c:'}

  定义

  c

  。目前还不知道会有哪些财产
• 将

  docmod

  库更改为将

  Vue.set

  放入其中

可能的解决方案

有没有办法让Vue监视完整文档对象并检测没有初始值的字段中的更改？假设，

docmod

可以通知我某些更改，我是否可以强制Vue以某种方式更新其页面？我可以重新定义值的对象属性，用一些调用

Vue.set

的代码包装原始的getter和setter吗

---

非常感谢您的帮助

您可以调用

this.$forceUpdate（）

强制

Vue

更新屏幕。这不是推荐的做事方式，但在你的情况下，我真的看不到任何其他方式

请参见此处的更新版本：

---

我在您的

表单.vue

中添加了一个方法

refresh

，该方法绑定到文本框的

@input

。此方法调用

This.$forceUpdate（）导致
Vue
重新加载
 谢谢你的主意！虽然这似乎不是一个非常“干净”的解决方案，但我确实认为这将帮助我找到解决办法：）