[Vuejs]-How to display object with the selected value in dropdown

by

0👍

You can simply access the language object by the selected value

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

Watch the demo here

0👍

Suggestion : Try to use vue-I18n plugin to easily integrates localization features to your Vue.js application.

Working Demo as per 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>

Leave a comment