Search through an object with a string and return the matching keys value

Question

So I have an input. Depending on what the user selected I want to then search an object with the string the user selected and return the value corresponding to any matching keys.

      <label for="genre">
        <select class="search__genre" id="genre" v-model="search.genre">
          <option
            v-for="(genre, name, index) in genres"
            :key="index"
            >{{ name }}</option
          >
        </select>
      </label>
    </form>
    <div class="search__submit">
      <input
        type="submit"
        value="Search"
        class="search__submit-search"
        @click.prevent="submitted"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: {
        keyword: '',
        genre: '',
        genreId: ''
      },
      sortOptions: [
        'Sorting Options',
        'Popularity Descending',
        'Popularity Ascending',
        'Release Date Descending',
        'Release Date Ascending',
        'Vote Average Descending',
        'Vote Average Ascending'
      ],
      genres: {
        Horror: '27',
        Action: '28',
        Comedy: '35',
        Crime: '80',
        Drama: '18'
      }
    }
  },

I plan on adding a watcher to watch for changes in search.genre and then execute a function that returns the corresponding value.

For example if the user selects Drama. I want to save '18' as a string in search.genreId

All results on google are returning arrays where i just need to return a string.

Help is much appreciated!

Answer 1

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>