[Vuejs]-How should I build this Vue countdown timer element

by

0👍

I will try to fix your component. See the // << comments

For more about props see https://v2.vuejs.org/v2/guide/components-props.html

Also be careful when defining variables. You almost never need globals, so be sure to use 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
})

Leave a comment