Component/Directive for v-if="now < start_at"

[carcinocron]

I made an issue in this repo, but the author might consider it outside the scope of the library: https://github.com/brockpetrie/vue-moment/issues/24 I'm not requesting "technically how to do it", I'm requesting a clean interface for it.

<div v-if="moment().isBefore(otherTime)"></div><div v-else></div>

It would be awesome if we had something for this, except at the moment of inflection (when moment().isBefore(otherTime)'s status changes from true to false) Vue is able to detect it as a change and react accordingly.

Here is a similar discussion, but did not provide a clean API for accomplishing this. https://github.com/vuejs/Discussion/issues/214

Another possible implementation:

<div v-if="now > otherTime" v-recalculate-at="otherTime"></div><div v-else></div>

where v-reset-now-at="otherTime" might translate to:

resetNowAtDirective:function(){
    this.now = Date.now();
    setTimeout(()=>{
        // triggers mutation observation
        this.now = Date.now();
    },calculate_ms_delay_until(this.otherTime));
},

[LinusBorg]

I would rather use a component for this:

https://jsfiddle.net/Linusborg/x0vaosfs/

[carcinocron]

I'm not picky about the component vs directive distinction. I'll see if I can come up with something.

[skyrpex]

Why not using a mixin that adds a now computed property that updates each second?

Something like:

import Vue from 'vue';
import moment from 'moment';

const component = new Vue({
    data: {
        now: moment(),
    },
    created() {
        setInterval(() => {
            this.now = moment();
        }, 1000);
    },
});

export default {
    computed: {
        now() {
            return component.now;
        },
    },
};

[skyrpex]

In fact, I just created a mixin... https://github.com/skyrpex/now

[carcinocron]

I'm not happy with that solution, I'll attempt to send a PR if I get something I'm happy with.

[reinerBa]

I have a Mixin that offers countdowns, intervals, task and the requested feature https://github.com/reinerBa/Vue-Interval as you can see in the demo