CODEWITHSUNDEEP
javascriptlaravelvue.jsvuejs2
Jeremy
Jeremy

Reputation: 1952

Combine multiple data in .vue component

I have a country.vue component.

I'm doing a loop for. And in this loop, I'd like to collect only the country names based on the locale of the application.

To collect the locale, I create a new data called "local". I would like to combine this locale in my :label.

<template>
<li>
    <el-option
        v-for="country in countries"
        :key="country.name"
        :value="country.name"
        :label="country.translations.fr">
    </el-option>
</li>


<script>
export default {
    data() {
        return {
            countries: [],
            locale: document.querySelector('html').getAttribute('lang')
                }
            },
             …

I would like to do something like this:

<el-option
    v-for="country in countries"
    :key="country.name"
    :value="country.name"
    :label="country.translations. ' + "locale" . ">
</el-option>

Thanks for your help

Upvotes: 0

Views: 750

Answers (1)

mhodges
mhodges

Reputation: 11116

You can use JavaScript's built-in Bracket Notation Property Accessor to accomplish this, like so:

<el-option
    v-for="country in countries"
    :key="country.name"
    :value="country.name"
    :label="country.translations[locale]">
</el-option>

Upvotes: 4

Related Questions