Combine multiple data in .vue component

Question

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

@mhodges I did not know, but it works! It has a name? Thanks a lot for your help ! — Jeremy
– Jeremy, Commented Jun 25, 2018 at 16:42
Just posted an answer with a link to more details. Glad that worked for you :) — mhodges
– mhodges, Commented Jun 25, 2018 at 16:47

mhodges · Accepted Answer · 2018-06-25 16:47:22Z

4

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>

answered Jun 25, 2018 at 16:47

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Combine multiple data in .vue component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related