How to list items with v-for in an associative array? Vue

Question

I am strugling listing items with v-for on an associative array.

Don't know how to pass the key's of the array's and then list the titles.

Found a lot of examples, but didn't found a familiar example.

There are more language selections, but posted just a few so you could all get the idea.

Array:

data: () => ({
        translations: [
            {
                'lt': {
                    title: 'Lithuanian',
                },
                'en': {
                    title: 'English',
                }
            }
        ],
})

HTML:

<select v-model="activeLanguage">
  <option v-for="(translation, key) in translations" :value="key">
    {{translation.title}}
  </option>
</select>

How to specify the key and then display the titles in a v-for and in a HTML option tag?

Can you change the variable translations and edit it so it's an object and not an array? — Julia
– Julia, Commented May 12, 2020 at 14:58

Yasin Arafat · Accepted Answer · 2020-05-12 14:59:42Z

1

<option v-for="(translation, key) in translations[0]" :value="key">
  {{ translation.title }}
</option>

edited May 12, 2020 at 14:59

answered May 12, 2020 at 14:54

Yasin Arafat

2,42618 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ViktorasssIT Over a year ago

Thanks. It worked, and is very simple. Had a thought of doing this way, but didn't do it, lol.

Majed Badawi · Accepted Answer · 2020-05-12 14:56:44Z

1

You should iterate over translations[0] instead. Here is an example:

new Vue({
  el: "#app",
  data() {
    return {
         activeLanguage:null,
         translations: [
            {
                'lt': {
                    title: 'Lithuanian',
                },
                'en': {
                    title: 'English',
                }
            }
        ],
    };
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
     <select v-model="activeLanguage">
          <option v-for="(translation, key) in translations[0]" :value="key">
                {{translation.title}}
          </option>
     </select>
</div>

edited May 12, 2020 at 14:56

answered May 12, 2020 at 14:48

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

2 Comments

ViktorasssIT Over a year ago

Thanks for your time and answer, but this is not the proper solution. There will be multiple languages, and the select purpess is to select the language and then change the page content by the selected language. Made is as simple as possible, so posted just the part where the problem is.

ViktorasssIT Over a year ago

Thanks for your help! :)

Collectives™ on Stack Overflow

How to list items with v-for in an associative array? Vue

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related