CODEWITHSUNDEEP
vue.js
user12192123
user12192123

Reputation:

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

<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?

Upvotes: 0

Views: 171

Answers (1)

rcbgalido
rcbgalido

Reputation: 534

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

Upvotes: 1

Related Questions