Having a list of countries in three different languages as:
countries-fr.js
countries-en.js
countries-de.js
The goal is to require these files inside the component based on the selected language.
Currently, the approach involves importing all files first:
<template>
...
<p v-for="country in countryList"> {{ country.name }} </p>
...
</template>
<script>
import {EN} from '../../countries-en.js'
import {DE} from '../../countries-de.js'
import {FR} from '../../countries-fr.js'
export default {
data () {
EN, FR, DE
},
computed: {
countryList () {
let lang = this.$store.state.user.lang
if(lang == "EN"){return this.EN},
if(lang == "FR"){return this.FR},
if(lang == "DE"){return this.DE},
}
}
}
Although it works, importing multiple files beforehand can be tedious, especially for many languages.
The question here is: how can I dynamically import a file based on the current locale?
One possible solution could involve adding if/else statements before the <script> section, but that might not be the most efficient way of importing files.