如何在下拉串列中显示具有所选值的物件-编程知识-白鹭情

我创建了如下所示的物件：

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>

显示是这样的：Welcome to New York City Wilkommen New York Stadt en en （下拉选单中选择的值是 en，因此它是“en”）

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

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

uj5u.com热心网友回复：

您可以通过所选值简单地访问语言物件

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

在这里观看演示

uj5u.com热心网友回复：

建议：尝试使用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>