在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ avalon數(shù)據(jù)更新,頁面視圖未更新

avalon數(shù)據(jù)更新,頁面視圖未更新

我用avalon做了一個獲取手機驗證碼的頁面,在獲取驗證碼后一定時間內(nèi)不能再次獲取,有倒計時,第一次倒計時正常顯示,再次獲取時倒計時無法正常顯示,但是后臺數(shù)據(jù)的確變了

clipboard.png

clipboard.png

clipboard.png

clipboard.png

因為測試所以將時間改為3,看右側(cè)控制臺變量的確減小,但是視圖一直是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)){
            // 發(fā)送請求驗證碼
            // 設(shè)置不能再次點擊獲取驗證碼 && 開始倒計時
            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)
    }
回答
編輯回答
青檸

我的解決方案是把判斷移到$computed內(nèi)執(zhí)行

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

$computed:{
    text: function(){
        return this.canGetCodeFlg?'獲取驗證碼':'重新獲取('+this.canGetCodeTime+')'
     }
  }

但是你要問為什么你的視圖為什么不改變, 可能得讓司徒正美老師來解答. 而且官網(wǎng)文檔也說了, 不要在綁定屬性內(nèi)混入插值表達式. 復(fù)雜的判斷最好在JS內(nèi)寫.

2018年5月23日 19:13