如何在下拉列表中显示具有所选值的对象答案

【问题标题】：How to display object with the selected value in dropdown如何在下拉列表中显示具有所选值的对象
【发布时间】：2022-01-17 10:10:11
【问题描述】：

我创建了如下所示的对象：

export default {
    data() {
        return {
            language: {
                "en": {
                    welcomeMsg: "Welcome to New York City"
                },
                "de": {
                    welcomeMsg: "Wilkommen New York Stadt"
                }
            },
        };
    },
};

我有一个下拉菜单，下拉菜单中选择的变量是“lang”。所以当我运行这段代码时：

<h6 v-for="l in language">
    <div>{{ l.welcomeMsg }}</div>
    <div>{{lang}}</div>
</h6>

显示是这样的：欢迎来到纽约市 Wilkommen New York Stadt en en （选择的值是 en 在下拉列表中，因此它是“en”）

我想要实现的是，我想把 if 状态放在 h6 标记中，我只想在下拉列表中显示选定的值。例如，如果'lang' 是'en'，它应该显示welcomeMsg，即“欢迎来到纽约市”。如果是de，则另一个。

你能帮我解决这个问题吗？你认为我创建的对象错了吗？

【问题讨论】：

{{ l.lang.welcomeMsg }}
{{ l[lang].welcomeMsg }} 如果您希望 lang 被解释为“en”或“de”。但我建议改用 Vue-i18n (kazupon.github.io/vue-i18n)。

标签： javascript vue.js object vuejs2 vue-component

【解决方案1】：

您可以通过选定的值简单地访问语言对象

<h6>{{ language[lang]['welcomeMsg'] }}</h6>

观看演示here

【讨论】：

【解决方案2】：

建议：尝试使用vue-I18n 插件轻松将本地化功能集成到您的Vue.js 应用程序中。

按照 OP 工作 Demo ：

new Vue({
  el: '#app',
  data: {
    language: {
      "en": {
        welcomeMsg: "Welcome to New York City"
      },
      "de": {
        welcomeMsg: "Wilkommen New York Stadt"
      }
    },
    selectedLang: '',
    updatedMsg: ''
  },
    methods: {
        updateWelcomeMsg(event) {
                this.updatedMsg = this.language[event.target.value].welcomeMsg;
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<select name="lang" @change="updateWelcomeMsg($event)" v-model="selectedLang">
   <option value="en">EN</option>
   <option value="de">DE</option>
</select>

<div>{{updatedMsg}}</div>
</div>

【讨论】：