javascript - 我应该如何构建这个 Vue 倒数计时器元素

Question

我正在尝试建立一个倒计时促销结束的计时器，很简单，但我将近一周试图找到解决方案

    (function($){
    Vue.component('vue-timer', {
        data: function() {
            return{
                current_time: {
                    unix: new Date().getTime()
                },
                target_time: {
                    unix: new Date('{{ id }}T00:00:00-03:00').getTime() + 86400000 // + 1 dia
                }
            }
        },
        props: {
            endprom: this.endprom,
            id: this.id
        },
        computed: {
            remaining_time: function () {
                remaining_time = {};

                difference = new Date(this.target_time.unix - this.current_time.unix);

                remaining_time.unix = difference.getTime();
                remaining_time.days = remaining_time.unix / 1000 / 60 / 60 / 24;
                remaining_time.hours = (remaining_time.days - parseInt(remaining_time.days)) * 24;
                remaining_time.minutes = (remaining_time.hours - parseInt(remaining_time.hours)) * 60;
                remaining_time.seconds = (remaining_time.minutes - parseInt(remaining_time.minutes)) * 60;

                remaining_time.days = parseInt(remaining_time.days);
                remaining_time.hours = parseInt(remaining_time.hours);
                remaining_time.minutes = parseInt(remaining_time.minutes);
                remaining_time.seconds = parseInt(remaining_time.seconds);

                return remaining_time;
            }
        },
        methods: {
            updateCurrentTime: function () {
                var self = this;

                // Atualiza o tempo atual cada segundo
                g.intervals['interval-{{ product_random_id }}'] = setInterval( function () {
                    self.current_time.unix = new Date().getTime();
                }, 1000);
            }
        },
        mounted: function () {
            this.updateCurrentTime();
            jQuery('.showcase').adjustHeights({
                selector: '.product__info-inner'
            });
        },
        template: '#vue-timer-template'
    })
})(jQuery);

这是我在其中设置计时器的 html，看起来它们是分开的

    <div id="vue-timer-{{ product_random_id }}" >
        <vue-timer
            :id= "{{product_random_id}}"
            :endprom= "{{ product.end_promotion }}"
        ></vue-timer>
    </div>

    <script>
        g.actions['vue-timer-{{ product_random_id }}'] = function () {
            jQuery(window).load( function ($) {
                new Vue({
                    el: '#vue-timer-{{ product_random_id }}',
                    data: {
                        id: "{{product_random_id}}",
                        endprom: "{{ product.end_promotion }}"
                    }
                })
            })
        }
    </script>

而消息我得到这个消息图像| 您可以在此链接中进行测试，该链接带有网站预览websitepreview

标签： javascripthtmlvue.jsvue-component

Answer 1

我会尝试修复你的组件。见// << comments

有关道具的更多信息，请参阅https://vuejs.org/v2/guide/components-props.html

定义变量时也要小心。你几乎不需要全局变量，所以一定要使用var.

Vue.component('vue-timer', {
    data: function() {
        return {
            current_time: {
                unix: new Date().getTime()
            },
            target_time: {
               unix: new Date('{{ id }}T00:00:00-03:00').getTime() + 86400000 // + 1 dia
            }
        }
    },
    props: ['endprom', 'id'], // << never define values for your props, they are set from outside
    computed: {
        remaining_time: function () { // << you should use the computed value in your template
            var remaining_time = {}; // << only use local variables in here, never declare global
            var difference = new Date(this.target_time.unix - this.current_time.unix);

            // ...

            return remaining_time;
        }
    },
    methods: {
        updateCurrentTime: function () {
            var self = this;

            g.intervals['interval-{{ product_random_id }}'] = setInterval( function () {
                self.current_time.unix = new Date().getTime();
            }, 1000);
        }
    },
    mounted: function () {
        this.updateCurrentTime();
        $('.showcase').adjustHeights({   // << Use the local variable $ you pass in here
            selector: '.product__info-inner'
        });
    },
    template: '<div>{{ remaining_time }}</div>'; // << << this is the output of your computed function
})