鍍金池/ 問(wèn)答/HTML/ vue 怎樣重新初始化組件參數(shù)值

vue 怎樣重新初始化組件參數(shù)值

做的一個(gè)倒計(jì)時(shí)組件,當(dāng)?shù)褂?jì)時(shí)結(jié)束時(shí)怎樣重新開(kāi)始下一輪倒計(jì)時(shí),頁(yè)面上有多個(gè)此組件,傳的參數(shù)是一個(gè)剩余時(shí)間的秒數(shù)leftTime
圖片描述

頁(yè)面調(diào)用:

<!-- 倒計(jì)時(shí)組件 -->
<timer v-bind:code="hi.code" v-bind:left-time="hi.leftTime" v-bind:id="'timer' + hi.code"></timer>

Vue.component('timer', {
    template: '<div class="timer_wrap" data-name="time" v-html="countDown"></div>',
    data(){
            return{ count: '' }
    },
    props: ['leftTime', 'code'],
    created() {
        this.count = this.leftTime;
    },
    computed: {
        countDown: {
            get: function(){
                let self = this;
                let time = self.count;

                let content = '<ol class="s"><span class="sp1">{1}</span><span class="sp2">{2}</span></ol>\
                            <ol class="f"><span class="sp1">{3}</span><span class="sp2">{4}</span></ol>\
                            <ol class="m"><span class="sp1">{5}</span><span class="sp2">{6}</span></ol>';

                if(time <= 0) {
                    // TODO 進(jìn)入下一輪倒計(jì)時(shí)
                    this.refreshTime(this.code);
                    return this.fmt(content, 0, 0, 0, 0, 0, 0)
                }

                let hour = Math.floor(time / 60 / 60);
                let hour1 = Math.floor(hour / 10);
                let hour2 = Math.floor(hour % 10);

                let mn = time - hour * 60 * 60;
                let minute = Math.floor(mn / 60);
                let minute1 = Math.floor(minute / 10);
                let minute2 = Math.floor(minute % 10);

                let second = mn - minute * 60;
                let second1 = Math.floor(second / 10);
                let second2 = Math.floor(second % 10);

                return this.fmt(content, hour1, hour2, minute1, minute2, second1, second2)
            },
            set: function(){
            }
        }
    },
    mounted(){
        this.start()
    },
    methods: {
        fmt(c) {
            for (let i = 1; i < arguments.length; i++) {
                c = c.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
            }
            return c;
        },
        start() {
            let self = this;
            let timer = setInterval(function() {
                self.count--;
                if(self.count <= 0){
                    clearInterval(timer);
                }
            }, 1000);
        },
        refreshTime(code) {
            let self = this;
            Box.ajax({code: code}, Route.Hall.GET_DATA, function (data) {
                new Vue({
                    el: '#_' + code,
                    data: data,
                    mounted() {
                        
                    },
                    computed: {
                        
                    }
                })
            })
        }
    }
});
回答
編輯回答
初心

既然是v-bind綁定 直接更改綁定的值不就可以了么?

2017年1月7日 17:48
編輯回答
凝雅

首先感謝Black_晨同學(xué)的回答,目前我采用另一種方式可以讓循環(huán)繼續(xù),但是另一個(gè)問(wèn)題就是繼續(xù)后的值不會(huì)更新到UI上,移步:https://segmentfault.com/q/10...

2017年7月30日 21:52