Yesterday, I encountered a pitfall when using vue to develop the project. This problem was successfully solved through discussions among group members.
The specific situation is as follows: using vue development, there is a number of people statistics component in the page. The number of people statistics needs to change the data dynamically. Since there is no real data at present, what I want is to use random numbers and setInterval to change the data in data, so as to achieve real-time changes in the data, which is convenient for me to do digital page turn animation.
The code is as follows:
<template>
<div class="totel-number">
<div class="panel-top">
<div class="panel-top_Left"></div>
<div class="panel-top_Text flex-center" >quantity</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() {
//Set the timer and refresh it every 3 seconds var self = this;
setInterval(getTotelNumber,1000)
function getTotelNumber() {
for(let i=0; i < ; i++){
[i] = (()*10) -1
}
}
getTotelNumber();
}
}
</script>
Have you found any problems?
In beforeMount(), you will find that the data is changing, but there is no change on the page.
What is the reason for this?
Method: First break down the problem and verify the positive and negative points of doubt
After multiple verifications and multiple verifications and reviewing the document, Brother Qiang found:
It should be noted that there are two situations where view updates will not be triggered, and a workaround is required:
- When you use the index to set an item directly, for example: [indexOfItem] = newValue
- When you modify the length of the array, for example: = newLength
With this idea, I understood why there was such a pitfall, and then improved the code:
<script>
import $ from 'jquery'
import * as d3 from 'd3';
export default {
data(){
return {
totelNumber: new Array(8)
}
},
beforeMount() {
//Set the timer and refresh it every 3 seconds var self = this;
setInterval(getTotelNumber,1000)
function getTotelNumber() {
let newArray = new Array(8)
for(let i=0; i < ; i++){
newArray[i] = (()*10) -1
}
= newArray
}
getTotelNumber();
}
}
</script>
This allows real-time dynamic refresh of data on the page.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.