昨天在用vue開發項目的時候遇到一個坑，在群友的探討中，成功的解決了這一問題。
具體情形如下：使用vue開發，在頁面中有一個人數統計組件，人數統計是要動態變化數據的，由于目前沒有真實數據，那么我想的是用隨機數和setInterval來改變data里面的數據，從而做到數據實時變化，這樣方便與我來做數字翻頁動畫。
代碼如下：
<template> <div class="totel-number"> <div class="panel-top"> <div class="panel-top_Left"></div> <div class="panel-top_Text flex-center" >數量</div> <div class="panel-top_Right"></div> </div> <div class="panel-body"> <div class="counter-wrap"> <ul class="counter-board"> <li class="num-board" v-for="item in totelNumber"> <span class="num u"> <i class="w">{{item}}</i> </span> <span class="num b"> <i class="w">{{item}}</i> </span> </li> </ul> </div> </div> <i class="cc-Corner cc-C-t cc-C-l"></i> <i class="cc-Corner cc-C-t cc-C-r"></i> <i class="cc-Corner cc-C-b cc-C-r"></i> <i class="cc-Corner cc-C-b cc-C-l"></i> </div></template><script>import $ from 'jquery'import * as d3 from 'd3';export default { data(){ return { totelNumber: new Array(8) } }, beforeMount() { //設置定時器，每3秒刷新一次 var self = this; setInterval(getTotelNumber,1000) function getTotelNumber() { for(let i=0; i < self.totelNumber.length; i++){ self.totelNumber[i] = Math.ceil(Math.random()*10) -1 } } getTotelNumber(); }}</script>大家有發現問題嗎？
在beforeMount里面console.log(this.totelNumber)會發現數據是在變化的，但是頁面上是沒有任何變化。
這是什么原因呢？
方法：先把問題分解開，就懷疑的幾個點做正反的驗證
在多次驗證在多次驗證和查看文檔后強哥找到了：
需要注意的是有兩種情況不會觸發視圖更新，需要換種變通寫法：
- 當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue
- 當你修改數組的長度時，例如： vm.items.length = newLength
更具這個思路我就明白了為什么會有這樣的坑，然后就將代碼進行了改進：
<script>import $ from 'jquery'import * as d3 from 'd3';export default { data(){ return { totelNumber: new Array(8) } }, beforeMount() { //設置定時器，每3秒刷新一次 var self = this; setInterval(getTotelNumber,1000) function getTotelNumber() { let newArray = new Array(8) for(let i=0; i < this.totelNumber.length; i++){ newArray[i] = Math.ceil(Math.random()*10) -1 } self.totelNumber = newArray } getTotelNumber(); }}</script>如此一來就可將數據實時動態刷新呈現在頁面上。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
