如何在 vue.js 中動態添加新的數據元素

Question

我在一種奇怪的單頁應用程序中使用 vue.js，在那里我有一些區域可以動態加載內容，並且它們與其他區域交互 - 即一開始沒有任何內容 - 我有一個類似於 v-html 的自定義 vue 組件 - 但會導致新的 html 被 vue 解析。

這一切都很好。

除了數據綁定。 任何現有的數據綁定都可以完美運行 - 所以如果我有這個：

   var data = 
   {
       some_string : "hello",
       some_object :  {
            whatever : 10
       }
   }

我后來讀到的任何東西都可以很愉快地與所有這些變量交互 - 顯示它們，雙向綁定等等。

但是 - 我無法添加任何新內容。 如果我嘗試 - 它只是不會被監視。

這意味着在我美妙的、完全動態的、代碼是數據環境中 - 每次我想創建一個新變量時，我都必須返回並更改主模板:(

在創建新變量之后，是否有任何命令能夠告訴 vue 一個新變量？ 我在想象這樣的事情：

vue.watch_new_variable( data.new_object );

甚至

vue.refresh_watches_of_data();

Answer 1

找到了 - 真的很簡單 - 我有一個名為 global 的數據對象 - 然后我可以使用 Vue.set 動態添加到它 - 例如

Vue.set( data.global, "my_new_value", 10 );

從那時起，我可以綁定到、尋址、更改 global.my_new_value 並且這一切似乎都完美無缺。