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

圖片描述

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

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

computed: {
    count_down: function () {
//                查一下cookie中 驗證碼字段 是不是存在
        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;
        }
    }

},

點擊事件中，從后臺取回驗證碼后，會以當(dāng)前時間+60s當(dāng)做一個cookie存儲。

現(xiàn)在的問題是：一般的驗證碼重新發(fā)送倒計時是點擊了【發(fā)送】后立刻變換文字，開始倒計時。
我這個點擊了發(fā)送后沒有變化，必須重新刷新一次才會開始倒計時。

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

代碼有重復(fù)的，因為原本是一個方法，我分拆了一下實驗，見諒。

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

回答

編輯回答

做不到

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

2018年3月1日 17:41

編輯回答

放開她

怎么改直接寫到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中 驗證碼字段 是不是存在
        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);
    },    
}

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

2018年2月9日 07:27