Поиск по объекту со строкой и возвращение соответствующего значения ключа

Question

Итак, у меня есть вход.В зависимости от того, что выбрал пользователь, я хочу затем выполнить поиск объекта со строкой, выбранной пользователем, и вернуть значение, соответствующее любым соответствующим ключам.

      <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'
      }
    }
  },

Я планирую добавить наблюдателя, чтобы отслеживать изменения в поиске..genre, а затем выполнить функцию, которая возвращает соответствующее значение.

Например, если пользователь выбирает Драма.Я хочу сохранить '18' как строку в search.genreId

Все результаты в Google возвращают массивы, где мне просто нужно вернуть строку.

Помощь очень ценится!

Answer 1

Вы можете привязать параметры непосредственно к genreId, установив value для каждого <option>.

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

Пример:

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>