[Vuejs]-How to write a change event method in vue-monthly-picker

1👍

if the documentation is anything to go by, my guess is

<vuemonthlypicker
    v-model="selectedMonth"
    :monthLabels=monthLabels
    @selected="onSelected"
>
</vuemonthlypicker>

where onSelected is a function defined in your methods.

1👍

You have three options. The easiest option with this library is by using the event that is described in the documentation. By putting v-on:selected or @selected in your component, you call a function with an instance of moment.

<vuemonthlypicker
  v-model="selectedMonth"
  :monthLabels="monthLabels"
  @selected="handleSelected"
/>

The second option is by keeping in mind that v-model is actually syntactic sugar for :value="variable" @input="(value) => variable = value". You can use this by defining your own function for the @input event, even though it isn’t as clean.

<vuemonthlypicker
  :value="selectedMonth2"
  @input="changeSelectedMonth2"
  :monthLabels="monthLabels"
/>

The third option is by defining a watcher on the variable that is being changed through the v-model. This is somewhat cleaner when defining a function that has side-effects.

<vuemonthlypicker
  v-model="selectedMonth"
  :monthLabels="monthLabels"
/>

with:

watch: {
  selectedMonth(x) {
    console.log("from watcher", x);
  }
}

Edit Vue Template

Leave a comment