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

Question

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

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”的形式出现)

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

你能帮我做这个吗？你认为我创造的对象是错的吗？

Answer 1

只需通过选定的值访问语言对象即可。

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

观看演示这里

Answer 2

建议:尝试使用vue-I18n插件来轻松地将本地化特性集成到Vue.js应用程序中。

根据OP，工作演示：

​

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>

​