Below is the object I created:
export default {
data() {
return {
language: {
"en": {
welcomeMsg: "Welcome to New York City"
},
"de": {
welcomeMsg: "Wilkommen New York Stadt"
}
}
};
}
};
I have a dropdown menu with the selected variable called "lang". Here is the code snippet:
<h6 v-for="l in language">
<div>{{ l.welcomeMsg }}</div>
<div>{{lang}}</div>
</h6>
The current display shows both welcome messages and the selected value from the dropdown, for example:
Welcome to New York City Wilkommen New York Stadt
en en (if 'en' is selected)
My goal is to only show the welcome message based on the selected value in the dropdown. So if 'en' is selected, it should only display "Welcome to New York City", and vice versa for 'de'. Do you think my object creation is correct? Can you help me implement the desired functionality?