169 похожих чатов

@RasulovMuzaffar продолжение 2ой вопрос также достаточно независим, у него на

входе есть содержимое 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 у то, что вводите и получается ваш компонент говорит вышестоящему
«Прими значение «строка»

1 ответов

14 просмотров

спасибо за такой развернутый ответ! на счет buffer = item.name понял прочитав уже 1часть но там один момент, -нет никакого запрета на самостоятельный ввод данных в инпут, т.е. он может принять значение, которого нет в подсказках в общем то есть

Похожие вопросы

Обсуждают сегодня

а через ESC-код ?
Alexey Kulakov
29
30500 за редактор? )
Владимир
47
Чёт не понял, я ж правильной функцией воспользовался чтобы вывести отладочную информацию? но что-то она не ловится
notme
18
У меня есть функция где происходит это: write_bit(buffer, 1); write_bit(buffer, 0); write_bit(buffer, 1); write_bit(buffer, 1); write_bit(buffer, 1); w...
~
13
Недавно Google Project Zero нашёл багу в SQLite с помощью LLM, о чём достаточно было шумно в определённых интернетах, которые сопровождались рассказами, что скоро всех "ибешни...
Alex Sherbakov
5
Как передать управляющий символ в открытую через CreateProcess консоль? Собсна, есть процедура: procedure TRedirectThread.WriteData(Data: OEMString); var Written: Cardinal;...
Serjone
6
в JclConsole объявлено так: function CtrlHandler(CtrlType: DWORD): BOOL; stdcall; - где ваше объявление с stdcall? у вас на картинке нет stdcall
Karagy
8
Ребят в СИ можно реализовать ООП?
Николай
33
program test; {$mode delphi} procedure proc(v: int32); overload; begin end; procedure proc(v: int64); overload; begin end; var x: uint64; begin proc(x); end. Уж не знаю...
notme
6
https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_h_common.erl#L174 https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_olp.erl#L76 15 лет назад...
Maksim Lapshin
20
Карта сайта