?

+

Урл меняется только когда меняешь роут

а что значит плюс?)

Да)

С калькулятора пишу:)

лел

спасибо большое!

Пожалуйста

Народ, подскажите юзабельное решение календаря расписаний на vue js

тут есть логические «предшественники» ошибок
лучше сначала разобраться с ними

Предлагаю для начала поразмыслить над правилами формальной логики, которую заложил еще Аристотель до нашей эры, а в частности о
«сохранение истинности значения безотносительно к содержанию входящих в эти высказывания понятий, а также конструирование этих правил.»

Что нам дает это знание? То, что нам будет проще и удобнее рассматривать сложный вопрос, разбив его на отдельные более простые вопросы, при этом избавиться от всех лишних связей в том числе зависимости от контекста.

Вот теперь применим эту логику к вашему форку автокомплита
Что было заложено в логику изначального компонента:

Есть некоторый набор строк (массив подсказок)
Есть некоторый инпут
Когда инпут сфокусирон, то появляется окно подсказок
Окно подсказок формируется из подсказок
-если в инпуте нет данных, то выводятся все подсказки
-если в инпуте есть данные, то выводятся только те подсказки, которые содержат в себе то, что уже есть в инпутед
-при нажатии на подсказку содержимое инпута принимаем значение этой подсказки
-нет никакого запрета на самостоятельный ввод данных в инпут, т.е. он может принять значение, которого нет в подсказках

Фактически это уже 2 простые задачи
1) реализовать инпут, чтобы можно было вводить в него данные и забирать из него данные, это за нас может сделать Vue

2) реализовать окно подсказок

1ый вопрос никак не зависит от второго, это мы можем понять исключительно по правилам преобразования высказываний, вообще не прибегая к коду и он решается при помощи простого
<input v-model=«buffer» />
buffer это не какое-то конкретное поле, мы должны максимально избавиться от внутреннего контекста внутри нашего вопроса, buffer это некий мостик с реальным миром (нашим инпутом)
он никогда не имеет своего собственного значения
buffer: {
     set(value) {
       this.$emit("input", value);
     },
     get() {
       return this.value;
     }
   },

когда мы пытаемся читать из него, то читаем из того, что нам передали
а когда пытаемся писать в него, то не изменяем напрямую value, а лишь оповещаем другой слой нашего приложения о том, что «у нас пришли новые данные, вот они», а далее уже другой слой приложения (наш App.vue) решит нужно ли эти данные принять или отвергнуть

Примерно такой функционал

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

Получается в одном случае вы пытаетесь присвоить своему значению объект, а во втором случае строку, но затем обрабатываете их одинаково.
У вас изменился лишь вопрос того как отобразить подсказки и как из этого слоя оповестить внешний мир и желании произвести мутацию данных
Проблема была исключительно в этом слое, но вы видимо в попытках найти эту ошибку понаписали еще каких-то условий, которые затрагивают совсем другие области ответственности, другие слои. Этого можно было избежать при помощи четкого понимания зон ответственности

Не знаю точно ли я понял ваш изначальный вопрос потому что его можно трактовать по-разному, но вот одно из решений
https://codesandbox.io/s/autocomplete-forked-8j6cd?file=/src/components/Autocomplete.vue


А вам общая рекомендация - вспоминать Аристотеля, разбивать сложные вопросы на простые, рассматривать их отдельно и без контекста, доказывать и воспроизводить их функциональность без контекста, заниматься программированием в голове на своем естественном языке, а только потом писать код.

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

т.е. нельзя тупо писать что то что нет в списке

Ну этого не было в предыдущих требованиях) и вы его не озвучивали, если есть то логика меняется с самого низа
Тогда инпут не связан напрямую с buffer, т.к. он не выступает в качестве инициатора мутации, а по сути служит только подсобным средством для сокращения вариантов в подсказках, это каскадно задевает пару слоев

как пропсы типизировать в кастомные типы?