Is there a way to dynamically import an instance in Vue while using a parameter?
I am interested in dynamic importing the language into flatpickr-vue.
import { de } from 'flatpickr/dist/l10n/de.js';
How can I make the "locale" parameter part of the import path dynamic?
<akaunting-date
...
:config="{
...
locale: '{{ language()->getShortCode() }}',
}"
...
></akaunting-date>
<template>
<base-input :label="title"
:name="name"
:class="[
{'readonly': readonly},
{'disabled': disabled},
formClasses
]"
:footer-error="formError"
:prependIcon="icon"
:readonly="readonly"
:disabled="disabled"
>
<flat-picker slot-scope="{focus, blur}"
@on-open="focus"
@on-close="blur"
:config="config"
class="form-control datepicker"
v-model="real_model"
@input="change"
:readonly="readonly"
:disabled="disabled">
</flat-picker>
</base-input>
</template>
<script>
import flatPicker from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";
import { de } from 'flatpickr/dist/l10n/de.js';
export default {
name: 'akaunting-date',
components: {
flatPicker
},
props: {
title: {
type: String,
default: '',
description: "Modal header title"
},
placeholder: {
type: String,
default: '',
description: "Modal header title"
},
readonly: {
type: Boolean,
default: false,
description: "Input readonly status"
},
disabled: {
type: Boolean,
default: false,
description: "Input disabled status"
},
formClasses: null,
formError: null,
name: null,
value: {
default: null,
description: "Input value defalut"
},
model: {
default: null,
description: "Input model defalut"
},
config: null,
icon: {
type: String,
description: "Prepend icon (left)"
}
},
data() {
return {
real_model: this.model
}
},
mounted() {
this.real_model = this.value;
if (this.model) {
this.real_model = this.model;
}
this.$emit('interface', this.real_model);
},
methods: {
change() {
this.$emit('interface', this.real_model);
this.$emit('change', this.real_model);
}
}
}
</script>
I feel like I'm making progress...
computed: {
config() {
return {
locale: require('flatpickr/dist/l10n/' + this.locale + '.js').default.en,
}
}
},
Now I need to make the ".en" in .default change dynamically. Is that possible?
It's not completely dynamic yet and there's still the error message below that I don't quite understand
[Vue warn]: The computed property "config" is already defined as a prop.