All individual subscriptions are 50% off this week only!

Gabotronix
1 month ago
144
1
General

Adding v-model to non-input custom component in Vue?

Posted 1 month ago by Gabotronix

Hi everybody, I created a custom calendar component and I was wondering how I can send value upwards, I thought about using v-model but all the posts I saw about it use input elements and my component uses divs. I know I could technically use vuex for this but that doesn't speak reusability to me ...

I want to have something like :

<v-calendar v-model="interval" ></v-calendar>

In my calendar component the user clicks on days and these days are added to data property interval:


data(){
    return {
        interval:[]
    }
},

methods:
{
clickedDay(weekDay, calendar)
    {
        let index = calendar.index;
        let add = Vue.moment(weekDay.fullDate, 'M-D-YYYY');

        if(index == 0)
        {
           add.isAfterOrSame(Vue.moment(this.interval[0], 'M-D-YYYY'));
           this.$set(this.interval, 0, weekDay.fullDate);
        }
        else
        {
            add.isAfter(Vue.moment(this.interval[0], 'M-D-YYYY'));
            this.$set(this.interval, 1, weekDay.fullDate);
        }
    },
}

Please sign in or create an account to participate in this conversation.