Vue.js-无法触发DOM更新

Question

所以我有一个复杂的嵌套结构，就像在我的Vue应用程序的数据中一样：

{
  x: {
    y: [{
      z: {
        a: 1
      }
    }]
  }
}

尽管我在v-for中使用child属性使用了v-model，但设置.z.a = 2似乎并未在UI中触发此操作。我想好了，一定是我在不通知Vue的情况下变异了一个属性，没什么大不了的，我只需要使用Vue.set。

所以我尝试了以下操作：

Vue.set(app.x.y[0].z, "a", 2)
Vue.set(app.x.y[0], "z", {a:2})
Vue.set(app.x.y, 0, app.x.y[0]) // app.x.y[0] is definitely {z:{a: 2}}
Vue.set(app.x, "y", app.y)
app.x.y = app.x.y.map(_ => _)

尽管这些通常都能为我解决问题，但在这种情况下，它似乎不起作用。如果发生更改，我将使用v-model而不是传统的道具，因此它将被同步回应用程序。我想知道这是否会使x的app.x与实际数据属性失去联系。

我正在寻找一种触发DOM更新或在Vue中正确设置值的方法。我也尝试了app.$forceUpdate()无效：/

编辑：虽然我无法让Vue自己观察更改，但是我发现我有一个在初始化为{}后填充z的函数。我假设Vue在初始化时就在z上设置了观察者，因此没有观察到任何进一步的更改（即在下一行中添加a）。更改此属性以填充初始化时的所有可能属性，并结合上面的.set和$forceUpdate中的任何一个，我能够触发DOM更新。不过，这只是暂时的解决方法，我非常希望能够让Vue自动观察此更新。

Answer 1

您可以尝试vue computed property or watcher。这将自动检测数据中的更改并更新您拥有的v模型数据。

在此示例中，消息的返回值的更改将自动应用于输入。

<input v-model="message">

computed: {
    message(){
        return {x:{y:[1,2,3]}}
    }
}