Подставить переменную языка в итерации vue.js?

Question

[Dauren S]

Есть такой вывод в шаблоне

<option   v-for="dish in  menu.dishes[1][0]" :value="dish.id"   v-bind:key="dish.id">{{dish.title_ru}}</option>

export default {

  data(){
    return {
      menu:{
        dishes:  '',
        selectedmenu:  '',
      },
      dates: '',
      personal:'',
      lang:'',
    }
  }

Переменную lang буду получать из апи.
{{dish.title_ru}} хотел вместо ru подставлять значение из апи например en. Как можно туда подставить переменную?

Comments

[Ярослав Иванов]

в хуке created делать запрос через fetch на api, результат подставлять в data

[Dauren S]

Ярослав Иванов, а в самом шаблоне вместо ru как подставить значение lang?

[Андрей Пике]

Ну, заводите переменную lang = 'ru'; по дефолту.
После запроса к API при success меняете её на то что получили, в шаблоне само подхватится.

Answer 1

[0xD34F]

{{ dish[`title_${lang}`] }}

или

v-text="dish['title_' + lang]"

или

:text.prop="dish['title_'.concat(lang)]"

Comments

[Dauren S]

БОЛЬШОЕ СПАСИБО!

[Андрей Пике]

v-bind:key="..." и :key="..." это одно и то же.

[Dauren S]

Андрей Пике, Спасибо учту!)