在Vue中獲取數據是一個十分常見的操作,然而有時候我們會發現獲取的數據沒有得到更新。這很可能是因為Vue的響應式性質導致的,請看下面的例子。
<div id="app"> <p>message: {{ message }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Hello' } }); setTimeout(function(){ vm.message = 'World'; }, 1000); </script>
在上述代碼中,我們創建了一個Vue實例并且定義了一個叫做message的數據屬性。在界面上展示message的值。之后我們通過setTimeout方法將message屬性的值設置為'World'。我們期望的是在1秒鐘后,頁面應該會展示出'World',然而事實是沒有更新,還是展示出原來的'Hello'。
這是因為Vue對數據的響應式依賴進行了優化,它會在數據被改變時才進行更新。而在上述代碼中,數據是在一個異步函數中被修改的,Vue并沒有辦法跟蹤這個變化,因此不會更新頁面。所以我們需要通過Vue提供的$set方法來通知Vue數據發生了變化,代碼如下。
<div id="app"> <p>message: {{ message }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Hello' } }); setTimeout(function(){ vm.$set(vm, 'message', 'World'); }, 1000); </script>
在上述代碼中,我們使用了Vue提供的$set方法,第一個參數是Vue實例,第二個參數是需要更新的屬性名,第三個參數是需要更新的值。這樣Vue就會跟蹤到數據的變化并更新頁面的展示了。
上一篇php substr
下一篇ajax異步如何返回數據