[Vuejs]-Vue: get translations from API

by

1👍

✅

remember what you type in there is simply js. you could put the language on a variable on your data object and then use:

data: {
  "lang": "en"
}

<div> {{ data.name[lang] }} </div>

you could also re-structure your JSON response to look like this:

 data: {
  "lang": "en",
  "translations": {
    "en": {
      "configuration": "configuration",
      "description": "this is the configuration"
    },
    "fr": {
      "configuration": "configuration",
      "description": "c'est la configuration"
    },
    "nl": {
      "configuration": "configuratie",
      "description": "dit is de configuratie"
    }
  }
}

then you use in you template:

<div> {{ translations[lang].configuration }}</div>

this way the variable name in the template becomes more descriptive. you could also on change of language, take the whole object for a language and put it on data directly, so you do not have to refer to it via translations[lang] anymore.

👤oshell

Leave a comment