在 .vue 组件中合并多个数据答案

【问题标题】：Combine multiple data in .vue component在 .vue 组件中合并多个数据
【发布时间】：2018-06-25 16:32:58
【问题描述】：

我有一个 country.vue 组件。

我正在做一个循环。在这个循环中，我只想根据应用程序的语言环境收集国家/地区名称。

为了收集语言环境，我创建了一个名为“local”的新数据。我想在我的 :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')
                }
            },
             …

我想做这样的事情：

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

感谢您的帮助

【问题讨论】：

你试过country.translations[locale]吗？
@mhodges 我不知道，但它有效！它有名字吗？非常感谢您的帮助！
刚刚发布了一个带有更多详细信息链接的答案。很高兴为你工作:)

标签： javascript laravel vue.js vuejs2

【解决方案1】：

您可以使用 JavaScript 的内置 Bracket Notation Property Accessor 来完成此操作，如下所示：

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

【讨论】：