avalon数据更新,页面视图未更新

LishiJ
  • 295

我用avalon做了一个获取手机验证码的页面,在获取验证码后一定时间内不能再次获取,有倒计时,第一次倒计时正常显示,再次获取时倒计时无法正常显示,但是后台数据的确变了

clipboard.png

clipboard.png

clipboard.png

clipboard.png

因为测试所以将时间改为3,看右侧控制台变量的确减小,但是视图一直是3

// html
 <div class="form-item">
            <span>手机号</span>
            <input type="text" placeholder="请输入手机号" :duplex="@phoneNum" maxlength="11" :keyup="@numKeyUp">
            <a :click="@getVerificationCode">{{@canGetCodeFlg?'获取验证码':'重新获取('+@canGetCodeTime+')'}}</a>
        </div>
// js
getVerificationCode:function () {
        if(this.canGetCodeFlg && this.regPhone.test(this.phoneNum)){
            // 发送请求验证码
            // 设置不能再次点击获取验证码 && 开始倒计时
            this.canGetCodeFlg = false;
            this.countDown();
        }else if(this.canGetCodeFlg){
            // 手机号格式错误
            this.phoneErr = true;
            alert('请输入正确得手机号')
        }
    },
    countDown:function () {
        var timer = setInterval(function () {
            if(this.canGetCodeTime > 0){
                console.log(this.canGetCodeTime)
                this.canGetCodeTime--;
            }else{
                // 重置
                this.canGetCodeTime = 3;
                this.canGetCodeFlg = true;
                clearInterval(timer);
            }
        }.bind(this),1000)
    }
回复
阅读 2.6k
1 个回答

我的解决方案是把判断移到$computed内执行

<a :click="@getVerificationCode" ms-text="text"></a>

$computed:{
    text: function(){
        return this.canGetCodeFlg?'获取验证码':'重新获取('+this.canGetCodeTime+')'
     }
  }

但是你要问为什么你的视图为什么不改变, 可能得让司徒正美老师来解答. 而且官网文档也说了, 不要在绑定属性内混入插值表达式. 复杂的判断最好在JS内写.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏