用vue寫了個(gè)倒計(jì)時(shí)，功能實(shí)現(xiàn)了，但渲染不成功？

圖片描述

<div class="verification-code-wrapper">
    <input type="text" placeholder="六位數(shù)字驗(yàn)證碼" ref="phone_login_verification_code">
    <a class="get-code"
       @click="get_verification_code(phone_login, type=3)">獲取驗(yàn)證碼</a>

    <div class="count-down" v-show="does_count_down_show">
        {{time_60}}{{count_down}}秒后重新獲取
    </div>
</div>

computed: {
    count_down: function () {
//                查一下cookie中 驗(yàn)證碼字段 是不是存在
        let cookie_arr = document.cookie.split(';');

        let expires;

        for (let i = 0; i < cookie_arr.length; i++) {
            let cookieArrTrim = cookie_arr[i].trim();

            if (cookieArrTrim.indexOf('count_down') === 0) {
                expires = cookieArrTrim.substring('count_down'.length + 1, cookieArrTrim.length);
            }
        }

        if (!expires) {
            return null;
        }


        window.setInterval(() => {
            this.time_60 -= 1;
        }, 1000);

    },

    does_count_down_show: function () {
        let cookie_arr = document.cookie.split(';');

        let expires;

        for (let i = 0; i < cookie_arr.length; i++) {
            let cookieArrTrim = cookie_arr[i].trim();

            if (cookieArrTrim.indexOf('count_down') === 0) {
                expires = expires = cookieArrTrim.substring('count_down'.length + 1, cookieArrTrim.length);
            }
        }

        if (this.time_60 > 0 && expires) {
            return true;
        }
        else {
            return false;
        }
    }

},

點(diǎn)擊事件中，從后臺(tái)取回驗(yàn)證碼后，會(huì)以當(dāng)前時(shí)間+60s當(dāng)做一個(gè)cookie存儲(chǔ)。

現(xiàn)在的問(wèn)題是：一般的驗(yàn)證碼重新發(fā)送倒計(jì)時(shí)是點(diǎn)擊了【發(fā)送】后立刻變換文字，開(kāi)始倒計(jì)時(shí)。
我這個(gè)點(diǎn)擊了發(fā)送后沒(méi)有變化，必須重新刷新一次才會(huì)開(kāi)始倒計(jì)時(shí)。

請(qǐng)問(wèn)應(yīng)該怎么改才能立刻開(kāi)始渲染？
也許需要在點(diǎn)擊事件中寫一個(gè)flag，綁定到發(fā)送按鈕，watch一下？

代碼有重復(fù)的，因?yàn)樵臼且粋€(gè)方法，我分拆了一下實(shí)驗(yàn)，見(jiàn)諒。

I have already solved this problem, there are too many conditions which unnecessary,I make it brief.

回答

編輯回答

做不到

computed方法會(huì)在頁(yè)面初始化的時(shí)候執(zhí)行一次，第一次應(yīng)該是被return掉才執(zhí)行setinterval，然后是函數(shù)內(nèi)部中使用的data中的屬性發(fā)生變化的時(shí)候才會(huì)執(zhí)行，你點(diǎn)擊的事件并沒(méi)有改變time_60 這個(gè)值，所以count_down并沒(méi)有執(zhí)行，刷新后應(yīng)為cook中有值，沒(méi)有被return 才會(huì)運(yùn)行setinterval；1樓說(shuō)的對(duì)，這樣的邏輯不適合寫在計(jì)算屬性中，應(yīng)該定義在methods中，在掉接口的回調(diào)中運(yùn)行比較合適。
還有個(gè)問(wèn)題count_down中沒(méi)有return 任何有效值，看你的邏輯，應(yīng)該只會(huì)展示undefined和null.

2018年3月1日 17:41

編輯回答

放開(kāi)她

怎么改直接寫到methods里面干嘛非要寫到computed里面

2018年9月11日 05:44

編輯回答

晚風(fēng)眠

<div class="count-down" v-if="countDownShow">{{time}}秒后重新獲取</div>

data() {
    return{
        countDownShow: false,
        time:60  
    }
},
methods:{
    countDown: function () {
//                查一下cookie中 驗(yàn)證碼字段 是不是存在
        let cookie_arr = document.cookie.split(';');
        let expires;
        for (let i = 0; i < cookie_arr.length; i++) {
            let cookieArrTrim = cookie_arr[i].trim();
            if (cookieArrTrim.indexOf('count_down') === 0) {
                expires = cookieArrTrim.substring('count_down'.length + 1, cookieArrTrim.length);
            }
        }

        if (!expires && this.time > 0) {
            this.countDownShow = true
        }
        
        let timeInter;
        timeInter = window.setInterval(() => {
            if(this.time === 0){
               clearInteral(timeInter) 
            }else{
                this.time_60 -= 1;
            }            
        }, 1000);
    },    
}

獲取完驗(yàn)證碼后執(zhí)行 this.countDown()方法即可。

2018年2月9日 07:27