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]}}
    }
}