Vue Componentの関数、具体的にはvuejs-datepickerのsetDateを呼び出すのってどうするの？というのでちょっと迷ったのでメモ。
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations - GitHub - charliekassel/vuejs-datepicker: A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
このdatepickerをインライン表示で使おうとしてるんですが、Todayボタンがなさそうなのが不便なので自分でボタンを置いて作ろうとしました。
なんですが、設定する方法がわからず。
最初v-model="date"とかやっておけば勝手に反映されるかなと思ったんですが違いましてね。
なんとなくコードを読んだことでdatepicker自体にsetDateなる関数があることはわかっていたので、それを呼べばいいんだろうと思ったものの、じゃあどうやってアクセスするの？と。
結論からいうと、ref属性で大丈夫でした。ドキュメントにも書いてあった。
Vue.js - The Progressive JavaScript Framework
なので、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>