Access to good locale in a json table with user locale

Question

I have a JSON table:

[
  {
    "fr": { "name": "chien", "name_plurial": "chiens" },
    "en": { "name": "dog", "name_plurial": "dogs" }
  },
  {
    "fr": { "name": "chat", "name_plurial": "chats" },
    "en": { "name": "cat", "name_plurial": "cats" }
  },
]

I have a .vue file or I import this file and where I do a v-for to recover the data

<template>
<div>
          v-for="(specie, index) in species"
          :key="index"
          :label="specie.en.name | capitalize"
          :value="specie.en.name">
</div>
</template>

import Species from '~/static/data/species.json'

export default {
        data() {
            return {
                species: Species,
            }
        },
}

I would like to retrieve the locale according to the language of my user user.lang.

How to do that?

Thank you!

Answer 1

Just add specie[${local}] to display the local lang you want.

like this?(example en)

new Vue({
  el: "#app",
  data: {
         local: "en",
      species: [
        {
          fr: { name: "chien", name_plurial: "chiens" },
          en: { name: "dog", name_plurial: "dogs" }
        },
        {
          fr: { name: "chat", name_plurial: "chats" },
          en: { name: "cat", name_plurial: "cats" }
        }
      ]
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span><b>{{local}}</b> language</span>
  <ul>
      <li v-for="(specie, index) in species" :key="index">{{specie[`${local}`].name}}</li>
    </ul>
</div>