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

鍍金池/ 問答/HTML/ VUE組件返回?cái)?shù)據(jù)在UI上不會(huì)更新

VUE組件返回?cái)?shù)據(jù)在UI上不會(huì)更新

  1. 先說一下場景,一個(gè)列表頁面(數(shù)據(jù)批量加載),每個(gè)列表的item都有一個(gè)倒計(jì)時(shí)組件,而且每個(gè)item的倒計(jì)時(shí)時(shí)間不一樣,當(dāng)某個(gè)item倒計(jì)時(shí)結(jié)束后,緊接著進(jìn)入下一輪倒計(jì)時(shí),此時(shí)的倒計(jì)時(shí)由另一個(gè)ajax請求獲取倒計(jì)時(shí)時(shí)間(只請求當(dāng)前item的時(shí)間)

<timer :code="hi.code" :remain="hi.leftTime" :id="'timer' + hi.code"></timer>

  1. 一輪倒計(jì)時(shí)結(jié)束后通過給 attr 給元素綁定一個(gè)date-time,利用此date-time重新計(jì)算倒計(jì)時(shí)

clipboard.png
這種方法是可以執(zhí)行到computed的get方法,而且一開始是會(huì)更新UI,就是途中 0 0 0 0 0 1之前,但是之后就不會(huì)更新UI,

clipboard.png

以下是timer.js
///////////////////////////////////////////////////////////////////////////////////////////

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

                let $timer = $('#timer' + this.code);
                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) {
                    self.count = $timer.attr(self.prop);
                    self.refreshDate(self.code);
                    return self.fmt(content, 0, 0, 0, 0, 0, 0)
                } else {
                    $timer.attr(self.prop, time);
                }

                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);

                console.log(hour1, hour2, minute1, minute2, second1, second2);

                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 ct = setInterval(function() {
                self.count--;
                if(self.count <= 0) {
                    // clearInterval(ct);
                }
            }, 1000);
        },
        refreshDate(code) {
            let self = this;
            Box.ajax({code: code}, Route.Hall.GET_DATA, function (data) {
                new Vue({
                    el: '#timer' + code,
                    data: eval('(' + data + ')'),
                    mounted() {
                        $('#expect' + code).html(this.expect);
                        $('#timer' + code).attr(self.prop, this.leftTime);
                        self.count = this.leftTime;
                    }
                })
            })
        }
    }
});
回答
編輯回答
笨尐豬

有沒人幫幫忙

2017年1月18日 07:26