我創建了如下所示的物件：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/414752.html
標籤：
上一篇：在Python中將用戶定義的物件存盤在numpy陣列中
下一篇：如何將一個物件合并到另一個物件中