[Vuejs]-Search through an object with a string and return the matching keys value

by

0👍

✅

You can bind the options directly to the genreId by setting a value on each <option>.

See https://v2.vuejs.org/v2/guide/forms.html#Select-Options

Example:

new Vue({
  el: '#app',

  data() {
    return {
      search: {
        genreId: ''
      },
      genres: {
        Horror: '27',
        Action: '28',
        Comedy: '35',
        Crime: '80',
        Drama: '18'
      }
    }
  }
})
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <select class="search__genre" id="genre" v-model="search.genreId">
    <option
      v-for="(genre, name, index) in genres"
      :key="index"
      :value="genre"
    >{{ name }}</option>
  </select>
  <p>genreId: {{ search.genreId }}</p>
</div>

Leave a comment