, setInterval () does not work when you want to write a CAPTCHA with Vue
<div class="verification-code-wrapper">
<input type="text" placeholder="" ref="phone_login_verification_code">
<a class="get-code"
@click="get_verification_code(phone_login, type=3)"></a>
<div class="count-down" v-show="count_down">{{count_down}}</div>
</div>
time_60: 60,
computed: {
count_down: function () {
window.setInterval(function () {
this.time_60 -= 1;
return this.time_60;
}, 1000);
}
}
Printing is normal in
setInterval (), but the return value has no effect.
change it to this
<div class="count-down" v-show="isCountDown">{{time_60}}</div>
isCountDown: false
this.isCountDown = true
window.setInterval(() => {
this.time_60 -= 1;
}, 1000);
1 this question
2 setInterval callback function return value not returned
3 computed unreasonable
time_60:60,
count_down:true
methods:{
startCountdown:function(){
if(count_down){
count_down = false;
var timer = window.setInterval(()=>{
this.time_60 -= 1;
if(this.time_60<=0){
this.time_60 = 60;
count_down = true;
window.clearInterval(timer)
}
}, 1000);
}
}
}
it is true that this points to the problem
changed to this
time_60: 60,
computed: {
count_down: function () {
let me = this;
window.setInterval(function () {
me.time_60 -= 1;
}, 1000);
}
}
it doesn't have much to do with this. I changed it
.
<div class="verification-code-wrapper">
<input type="text" placeholder="" ref="phone_login_verification_code">
<a class="get-code"
@click="get_verification_code(phone_login, type=3)"></a>
<div class="count-down" v-show="time_60 > 0" >{{time_60}}{{count_down}}</div>
</div>
count_down: function () {
window.setInterval(() => {
this.time_60 -= 1;
}, 1000);
}
it has worked.
The this direction changes in the
callback. There is no return value in general callbacks. I won't post it when you guys upstairs talked a lot about the solution.
