概要
ユーザーが設定している表示言語設定に応じてvuejs-datepickerの表示言語を動的に変更するという実装をする際、vuejs-datepickerの表示言語を親コンポーネントから制御する方法に詰まったのでメモを残しておくの巻
#困ったこと
親コンポーネントとvuejs-datepickerを使用している子コンポーネントが存在し、親コンポーネントから渡すpropsに応じて子コンポーネント側で使用しているvuejs-datepickerの表示言語を変更すること
#解決策
全ての言語を配列としてimportし、dataオブジェクトの任意のプロパティの値として指定しておきます(下記コードの場合、all_langという名前でimportし、dataオブジェクトのlanguagesというプロパティの値としてall_langを指定しています)。
そして親コンポーネント側から使用したい言語を文字列でpropsとして渡し、その文字列をもとにlanguagesの配列から使用したい言語オブジェクトを抽出し、それをdatepickerのlanguageプロパティに指定すれば解決しました!あとは何らかの方法でjaやenなど言語の識別文字列をどこからか取得するだけ。
ちなみに下記の場合、親コンポーネントからスペイン語を指定しており、デフォルト日本語になっています!
<template>
<calender
v-model="form.specical_date"
title="ブロックタイトル"
placeholder="プレースホルダー"
language="es"
/>
</template>
<script>
import Calender from './components/Calender.vue';
export default {
components: {
Calender,
},
data() {
return {
form: {
specical_date: null,
},
};
},
};
</script>
<template>
<div>
<span>{{ title }}</span>
<datepicker
format="yyyy-MM-dd"
:language="languages[language]"
:placeholder="placeholder"
:clear-button="true"
@input="updateDate"
/>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker';
import * as all_lang from 'vuejs-datepicker/dist/locale';
export default {
components: {
Datepicker
},
props: {
title: {
type: String,
default: '',
},
placeholder: {
type: String,
default: ''
},
language: {
type: String,
default: 'ja'
}
},
data() {
return {
languages: all_lang,
};
},
methods: {
updateDate(val) {
this.$emit('input', val);
},
}
};
</script>