Vue.js-无法触发DOM更新

问题描述 投票:0回答:1

所以我有一个复杂的嵌套结构,就像在我的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自动观察此更新。

javascript vue.js vuejs2
1个回答
0
投票

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

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

<input v-model="message">

computed: {
    message(){
        return {x:{y:[1,2,3]}}
    }
}
热门问题
推荐问题
最新问题