Vue Componentの関数、具体的にはvuejs-datepickersetDateを呼び出すのってどうするの?というのでちょっと迷ったのでメモ。

charliekassel/vuejs-datepicker
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations - charliekassel/vuejs-datepicker

このdatepickerをインライン表示で使おうとしてるんですが、Todayボタンがなさそうなのが不便なので自分でボタンを置いて作ろうとしました。

なんですが、設定する方法がわからず。

最初v-model="date"とかやっておけば勝手に反映されるかなと思ったんですが違いましてね。

なんとなくコードを読んだことでdatepicker自体にsetDateなる関数があることはわかっていたので、それを呼べばいいんだろうと思ったものの、じゃあどうやってアクセスするの?と。

結論からいうと、ref属性で大丈夫でした。ドキュメントにも書いてあった。

特別な問題に対処する — Vue.js
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>