Dynamic v-for loop in VueJS

Question

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!

kissu · Accepted Answer · 2022-01-28 14:40:35Z

2

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>

edited Jan 28, 2022 at 14:40

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Jan 28, 2022 at 8:34

Cosimo Chellini

1,7201 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kissu Over a year ago

Don't use index as the key tho.

Collectives™ on Stack Overflow

Dynamic v-for loop in VueJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related