CODEWITHSUNDEEP
vue.jsnuxt.js
Danilo.Micucci
Danilo.Micucci

Reputation: 83

Dynamic v-for loop in VueJS

I have to yml files (one in Fr and another in Nl), each with a line called "language", with the respective language.

Let's say that I'm receiving from the back a list in both languages of words, I save them as listFr & listNl.

And what I want to do is a dynamic v-for loop, using the variable language mentioned above, maybe something like this

         <ul>
          <li
            v-for="(list, index) in `list${$t('language')}`"
            :key="index"
          >
            <p class="element-title">{{ list.title }}</p>
          </li>
        </ul>

But obviously this is not correct as it's not showing the list of words. Thanks for your help!

Upvotes: 1

Views: 831

Answers (1)

Cosimo Chellini
Cosimo Chellini

Reputation: 1730

I think this is the best way

<template>
    <ul>
        <li v-for="(list, index) in dynamicList" :key="index">
            <p class="element-title">{{ list.title }}</p>
        </li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            listFr: [],
            listNi: [],
        }
    },
    computed: {
        dynamicList() {
            return this["list" + this.$t('language')]
        }
    }
};
</script>

Upvotes: 2

Related Questions