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

Question

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

因为测试所以将时间改为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)
    }

Answer 1

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

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

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

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