входе есть содержимое buffer, массив подсказок, а также ему необходимо знать сфокусирован ли сейчас инпут
Наличие первого и второго входного параметра мы уже обеспечили тем, что у нас есть buffer
Третьего у нас пока нет, поэтому нужно его реализовать, введем еще одно поле isFocused, которое будет принимать true, когда элемент сфокусирован и false, когда расфокусирован. В идеале логически было бы хорошо не вводить это поле, а сразу знать о том сфокусирован ли инпут или нет, но у нас нет такой технической возможности
<input v-model=«buffer» @focus="focused = true" @blur="focused = false" />
Теперь входные параметры для решения второго вопроса решены и мы можем его реализовать
Он сам состоит из 3х простейших подвопросов
2.1) должен решать отображаться ему или нет
<div v-if="focused"> …
2.2) должен фильтровать входные данные (подсказки) в соответствии со значением другого входного параметра
filtered() {
return this.value === ""
? this.items
: this.items.filter(item =>
item.toLowerCase().includes(this.valueInLoweCase)
);
}
…
v-for="(item, index) in filtered"
2.3) должен как-то оповещать о том, что по элементу кликнули
Мы уже рассмотрели вопрос, что для оповещения внешнего компонента о желании изменить данные мы используем buffer, поэтому и тут используем его
@mousedown=" buffer = item" где item конкретное значение строки, по которой кликнули
На этом работа этого «вопроса» закончена и продолжает работу логика вопроса 1
Почему @mousedown, а не @click
@click это 2 события
@mousedown + некоторое время пока палец «зажимает кнопку» + @mouseup
Мы возвращаемся к изначальной формулировке задачи и видим там правило «Когда инпут сфокусирон, то появляется окно подсказок»
Расфокусировка инпута происходит условно говоря одновременно с событием нажатия на кнопку мыши, поэтому в следующий тик после нажатия (опускание кнопки) он уже расфокусирован, а значит и окна подсказок уже нет, а значит и обрабатывать клик уже не на чем
И тут у нас есть 2 решения
-обрабатывать не сам клик, а именно @mousedown
-давать некоторую задержку на пропадание окна
мы выбрали 1ое решение потому что оно проще
Т.о. мы реализовали вашу первую задачу
Наш компонент максимально лишен своего состояния, своих переменных, исключение составляет focused, т.к. у нас есть некие технические ограничения
Еще раз про то, что такое buffer
когда читаем его, то он отдает нам значение того, что передано в качестве входящего параметра и соотвественно когда этот параметр меняется, то и буффер будет отдавать другое значение
когда мы пишем в него, то мы ничего никуда не записываем напрямую, а лишь оповещаем компонент уровня выше о том, что пришло новое значение, хочешь запиши, не хочешь - не записывай
===
Теперь вам нужен другой компонент, который был принимал на вход массив объектов типа
itemsForOne: [
{ id: 1, name: "Draste", description: "blablabla" },
{ id: 2, name: "Mordaste", description: "blablabla" },
{ id: 3, name: "Preved", description: "blablabla" },
{ id: 4, name: "Medved", description: "blablabla" }
],
и ваш дословный вопрос «каа сделать чтоб после выбора одного из итемов в инпуте остался только name»
но на самом деле тут нужно пересмотреть изначальные требования
До этого у вас и инпут и ваше окно подсказок могли оповещать более верхний слой об изменении одинаковым способом потому что и инпут и окно подсказок использовали строку в качестве того на что предлагали изменить первоначальный входной параметр
Но теперь у вас иначе
Вот кликает человек на item, который равен
{ id: 1, name: "Draste", description: "blablabla" } и этот item вы присваиваете buffer у, а значит как мы выяснили выше вы оповещаете верхний уровень
Говорите что-то вроде «Прими значение «{ id: 1, name: "Draste", description: "blablabla" }»
Но когда у вас происходит ручной ввод в инпут то вы тоже присваиваете buffer у то, что вводите и получается ваш компонент говорит вышестоящему
«Прими значение «строка»
спасибо за такой развернутый ответ! на счет buffer = item.name понял прочитав уже 1часть но там один момент, -нет никакого запрета на самостоятельный ввод данных в инпут, т.е. он может принять значение, которого нет в подсказках в общем то есть
Обсуждают сегодня