Vue Componentの関数、具体的にはvuejs-datepickerのsetDateを呼び出すのってどうするの？というのでちょっと迷ったのでメモ。
このdatepickerをインライン表示で使おうとしてるんですが、Todayボタンがなさそうなのが不便なので自分でボタンを置いて作ろうとしました。
なんですが、設定する方法がわからず。
最初v-model="date"とかやっておけば勝手に反映されるかなと思ったんですが違いましてね。
なんとなくコードを読んだことでdatepicker自体にsetDateなる関数があることはわかっていたので、それを呼べばいいんだろうと思ったものの、じゃあどうやってアクセスするの？と。
結論からいうと、ref属性で大丈夫でした。ドキュメントにも書いてあった。
なので、Todayボタンを実現するためのコードはこんな感じになりました。
<template>
<div>
<datepicker v-model="date" :inline="true" :language="ja" ref="picker"></datepicker>
<a class="btn btn-primary" @click="todayClick">
今日
</a>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker';
import {ja} from 'vuejs-datepicker/dist/locale'
export default {
data: () => {
return {
date: new Date(),
ja
}
},
components: {
Datepicker,
},
methods: {
todayClick() {
this.$refs.picker.setDate(new Date());
},
},
}
</script>