#5 Проект "Список собеседований" на Vue3, TS, Pinia. Отображение и удаление данных

Мой telegram-канал t.me/front_eve...
Код на GitHub github.com/Ale...
Готовый проект interviewstest...
Практические курсы:
JavaScript frontend-every...
React react.frontend...
Vue vue.frontend-e...
Создаем проект 'Список собеседований' с использованием Vue 3, TypeScript, Pinia, Firebase и Vite! Узнайте, как создать современное веб-приложение. Подробный урок по разработке приложения для хранения данных о собеседованиях с использованием всех вышеперечисленных инструментов.

[@Vladislav1449]

Спасибо за видео! Хотелось бы добавить
1) Атрибут to у RouterLink указывать строкой - не лучшая практика. Т.к. адрес ссылки может поменяться, лучше использовать name. И в данном случае можно было бы указать так :to="{ name: 'Interview', params: { id: data.id } }"
2) scoped слот можно деструктурировать и получается короче, особенно тут, когда их тут несколько.
3)
const listIntervies: Array = await getAllInterviews()
interviews.value = [...listIntervies]
Тут спред лишний и можно в одну тогда строку interviews.value = await getAllInterviews()

[@СергейБобков-б7э]

Thanks

[@ultrapokemonultrapokemonov6110]

can i include твердит, что ссылку в кнопку и кнопку в ссылку вставлять не стоит... Это, конечно, не такая уж прям ошибка, но я бы воспользовался router.push()/router.redirect() и не оборачивал бы кнопку редактирования в дополнительный router-link

[@frontend-skills]

В целом - согласен. Но именно в этом кейсе следовал документации Primevue 🙃

[@Vladislav1449]

Или можно и атрибут to конечно

[@kalyszhek5296]

все круто.

[@yashuuo]

удаление чет не работает у меня

[@frontend-skills]

Какая ошибка?

[@NillosT]

Всё замечательно, но в уроке всё заточено под firebase и начинающему разработчику приходится искать дополнительные уроки, чтобы понять, как это всё переделывать под работу с ситуацией, где обращаешься к бэку через API.

[@frontend-skills]

Все верно, тут работаем с Firebase :) другие проекты больше сделаем без него :)

[@svet0v]

Спасибо за видео, неплохие уроки, но очень хотелось бы посмотреть разработку проекта на nuxt 3 и с работой с api бекенда

[@frontend-skills]

Будет, но позже

[@timbrk]

Спасибо за курс! Добавлю для будущих поколений:
1) статус loading можно оформить штатной возможностью DataTable:
2) сообщение об отсутствии данных для вывода в таблице тоже органичнее смотрится, если воспользоваться специальным слотом DataTable, просто вставить такой template: Интервью пока нет

[@svet0v]

А норм вообще хранить токены к firebase в main.ts файле? Может лучше хранить их в .env файле и добавить его в gitignore?

[@frontend-skills]

Касательно Firebase можно на счёт этого не переживать. API key все равно виден в network. А Все правила безопастности указываются в rules базы данных

[@davidhayrapetyan7039]

Thanks !!!!!!!

[@WalksGirl]

Чтоб не дублировать код при удалении собеседования, можно наверно было изменить interviews.value, она же реактивная, или не получится?

[@frontend-skills]

А можно поподробнее, про какое дублирование речь?

[@WalksGirl]

На 36:57, файл PageList.vue, в onMounted строчка 55 ты скопировал спредом результат listIntervies в реактивную переменную interview.value, там массив получается, можно же из нее удалить удаляемое собеседование и она сразу пропадет, и не надо будет два раза дергать firebase.

[@frontend-skills]

@WalksGirl все верно, можно) но я люблю в таком случае дернуть Firebase. Чтобы точно работать с актуальными данными (здесь это не совсем нужно, но тем не менее). Но в целом вы правы, можно так, как вы говорите 👍

[@yakovbudarin907]

Топ контент

[@ДенисАгейчев]

🔥🔥🔥

[@thesweetlife843]

Подскажи по опыту, такой проект тянет на уровень ждуна или чуть повыше ?

[@СлавикГусев-л4и]

при нажатии на кнопку удалить в консоле появляется строка Autofocus processing was blocked because a document already has a focused element.

[@kovtunos]

Спасибо за видео

[@evgeniys.4325]

Спасибо!

[@Anatoli-bq1pe]

Благодарю!

[@artemunix5223]

накст и сеошка будет?

[@frontend-skills]

Возможно, но не в ближайшее время

[@Vladislav1449]

@@frontend-skills очень хотелось бы накст!)

[@artemunix5223]

@@frontend-skills покажешь как di vue nuxt делать?

[@frontend-skills]

Не понял вопроса

[@artemunix5223]

@@frontend-skills как реализовыать правильно Dependency Inversion на vue и nuxt

[@defender6550]