VueJs how to access object items in v-for

Question

I'm getting the following:

Vue template code:

<select class="form-select" v-model="post_format.wpml_language">

<option  v-for="(lang, index) in wpml_languages" :value="lang">{{lang}} {{index}}</option>

</select>

What I want; I want the value attribute of the option element to be the language code (en/es) and the text displayed to be the Language name

I'm not sure how to access the object in the vue code for it to display in the way I want. I've tried:

<select class="form-select" v-model="post_format.wpml_language">
<option  v-for="(lang, index) in wpml_languages" :value="lang[index]">{{lang[index]}}</option> 
</select>

Any help is appreciated

Gowthaman · Accepted Answer · 2020-05-10 01:54:20Z

1

I recommend you to modify your object so that your code and language are separate values.

this.languages.filter(lang =>{
  var code = Object.keys(lang)[0];
  lang.code = code;
  lang.value = lang[code];
});

This will make your code more readable. Codesandbox link for your reference.

answered May 10, 2020 at 1:54

Gowthaman

1,3021 gold badge9 silver badges17 bronze badges

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

Comments

Riley Pagett · Accepted Answer · 2020-05-10 01:46:54Z

0

You probably don't want lang[index], because you have nested objects. In this instance, the actual loop index is not useful. For each member of 'lang', you most likely want the key to be your option value ("en") and the value to be the printed text ("English"). While the following is not the cleanest option, it will work:

<select class="form-select" v-model="post_format.wpml_language">
    <option  v-for="(lang, index) in wpml_languages" :value="Object.keys(lang)[0]">
        {{ lang[0] }}
    </option> 
</select>

answered May 10, 2020 at 1:46

Riley Pagett

3731 silver badge7 bronze badges

1 Comment

Uriahs Victor Over a year ago

The value works but the text for the option is blank

Collectives™ on Stack Overflow

VueJs how to access object items in v-for

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related