How can I get the index of an element and return it from my template in Vue Js?

Question

<template> 
   <select class="form-control" id="sel2" v-model="genre_id">
              <option v-for="genre in genres" v-bind:key="genre.id">
                {{genre.name}}
              </option>
            </select
<template/>
<script>

    data() {
    return {
      genre_id: '',
}}
<script>

The code above gets all the genres and once one is picked it returns the genre.name. My question is, instead of returning the genre.name how can I return the genre.id even though I picked the name on my select form?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Add a value attribute:

<select class="form-control" id="sel2" v-model="genre_id">
  <option v-for="genre in genres" v-bind:key="genre.id" :value="genre.id">
    {{ genre.name }}
  </option>
</select>

The value attribute specifies the value to be sent to a server when a form is submitted.

The content between the opening and closing tags is what the browsers will display in a drop-down list. However, the value of the value attribute is what will be sent to the server when a form is submitted.

Note: If the value attribute is not specified, the content will be passed as a value instead.

Reference

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 4, 2020 at 7:33

rcbgalido

5343 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

How can I get the index of an element and return it from my template in Vue Js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related