Vue.js - 无法触发 DOM 更新

Question

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

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

尽管我在带有子属性的 v-for 中使用了v-model ，但设置.za = 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而不是传统的道具，所以它会被同步回应用程序。 我想知道这是否会解除app.x和 x 的实际数据属性的关联。

我正在寻找一种方法来触发 DOM 更新或在 Vue.js 中正确设置值。 我也尝试过app.$forceUpdate()无济于事：/

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

Answer 1

您可以尝试vue 计算属性或 watcher 。 这将自动检测数据中的更改并更新您拥有的 v-model 数据。

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

<input v-model="message">

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