如何在Vue-monthly-picker中编写更改事件方法

Question

我正在使用vue-monthly-picker渲染日期选择器。我该如何编写一个在更改月份时执行的方法？

这是我的代码

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

Answer 1

如果需要提供文档，我的猜测是

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

其中onSelected是您的方法中定义的函数。

Answer 2

您有三个选择。该库最简单的选项是使用文档中描述的事件。通过将v-on:selected或@selected放入组件中，可以调用具有moment实例的函数。

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

第二个选择是牢记v-model实际上是:value="variable" @input="(value) => variable = value"的语法糖。您可以通过为@input事件定义自己的函数来使用它，即使它不太干净。

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

第三个选项是通过对通过v-model进行更改的变量定义观察者。定义具有副作用的函数时，此方法会更干净。

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

具有：

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