Как выбирать стрелками клавиш между блоками c результатом поиска?

Question

[danilr]

Шаблон этого интерфейса:

<template>
  <div class="search-btn-wrapper">
    <div class="input-search-box">
      <input
        id="inpit-search"
        placeholder="Поиск ЖК/застройщика"
        v-model="inputText"
        @input="inputHandler"
      >
      <div v-if="!isOpenSearch" @click="searchOpen" class="img-open-wrapper">
        <img class="img-loop" src="/images/map-search/search-black.svg">
      </div>
      <img v-else @click="searchClose" class="img-drop" src="/images/map-search/close-black.svg">
    </div>
    <div v-if="isOpenSearch && nameSearch.length && !choosenName" class="search-result-wrapper">
      <div :key="index" v-for="(residential, index) in getFilterRc.slice(0,4)" 
          class="result-point" 
          @click="handlerDevOrRc(residential.id)"
      >
        <div class="result-img-wrapper">
          <img class="img-result" src="/images/map-search/developer-search.svg">
        </div>
        <div class="result-title">{{residential.title}}</div>
      </div>
    </div>
  </div>
</template>

Без сторонних библиотек, только js и vue

Answer 1

[Stalker_RED]

Точно так-же: Как в кастомном select (dropdown) реализовать выбор с клавиатуры?

Comments

[danilr]

Мне потом надо ещё выбрать пункт(эмулировать клик по нему), при клавиши ентер, а тут ведь только класс добавляется

[Stalker_RED]

danilr, ну добавляйте.

[Stalker_RED]

danilr, в девтулс нажмите на ссылочку, посмотрите в каком месте ошибка.
там какой-то dom-элемент не найден.

[danilr]

Stalker_RED, тут я понял, класс изначальный не добавил( вообще без него в начале хотелось бы). Теперь работает, но почему то если на блок из которого выбираю тыкаю - то уже, не работает переключение, а только из input

[danilr]

Stalker_RED, не понял как событие по enter повесить (до этого у меня по клику работало, а надо и чтобы кликнув сработало и при выборе на enter? Подскажи, пожалуйста как написать это.

[Stalker_RED]

danilr, там где обработка стрелок (38 и 40 кажись) добавить еще 13 (enter) по которому делать выбор.

[danilr]

Stalker_RED, у меня там данные из цикла берутся, как мне оттуда то достать, чтобы выполнить нужное действие @click="handlerDevOrRc(residential.id)"

[Stalker_RED]

danilr, не понял вопрос.

[danilr]

Stalker_RED, при клике на нужный мне блок - в метод передаются данные (берущиеся из цикла шаблона - v-for), а со стороны я не понимаю как их передать в вызов нужного мне метода.
@click="handlerDevOrRc(residential.id)"
Вот тут residential - это элемент массива getFilterRc

<div :key="index" v-for="(residential, index) in getFilterRc.slice(0,4)" 
          class="result-point" 
          @click="handlerDevOrRc(residential.id)"
      >

Вопрос в том, как мне получить то эти данные - методы prev и next просто класс добавляют для визуала, а мне нужно чтобы по enter данные выбранного блока передались residential.id

[Stalker_RED]

danilr, я не знаю vue, к сожалению.
В качестве костыля могу предложить сохранить этот id в дата атрибуте, например.
Но не уверен что это правильный vue-way.