Creé un objeto como se ve a continuación:
export default { data() { return { language: { "en": { welcomeMsg: "Welcome to New York City" }, "de": { welcomeMsg: "Wilkommen New York Stadt" } }, }; }, };Y tengo un menú desplegable, la variable seleccionada en el menú desplegable es "lang". Así que cuando ejecuto este código:
<h6 v-for="l in language"> <div>{{ l.welcomeMsg }}</div> <div>{{lang}}</div> </h6>La pantalla es así: Bienvenido a la ciudad de Nueva York Wilkommen New York Stadt en en (el valor seleccionado es en en el menú desplegable, por lo que aparece como "en")
Lo que estoy tratando de lograr, quiero poner el estado en la etiqueta h6 y solo quiero mostrar el valor seleccionado en el menú desplegable. Por ejemplo, si 'lang' es 'en', debería mostrar welcomeMsg, que es "Bienvenido a la ciudad de Nueva York". si es de, el otro.
¿Me puede ayudar con esto? ¿Crees que creé mal el objeto?
Sugerencia: intente usar el complemento vue-I18n para integrar fácilmente las funciones de localización en su aplicación Vue.js.
Demostración de trabajo según 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>