Ребят, кто-то может подсказать мне вообще в какую сторону гуглить

и думать, чтобы я смог при нажатие на кнопку 'детальней' во всплывающем окне отобразить информацию связанную с товаром у которого кнопка была нажата? И нужно ли мне для этого отдельный запрос GET делать на товар, если впринципе вся информация по товару есть и в запросе первом, где списком все товары?

Как все сложно, давай по порядку. Каждый блок с товаром это свой компонент. При нажатии на кнопку посылается ГЕТ запрос с деталями товара, которые потом рисуются в компоненте модалки.

У меня эти товары из общего массива, а не как отдельный компонент.

Не очень логично получать сразу всю информацию о товарах для списка. Так же и выводить в модалку какую-то мелкую информацию.

А как же меню отобразить если не списком ?

Правильно, у вас есть компонент-родитель, он получает этот массив товаров и через for делает цикл где выводит компоненты product-item

О как сложно. Отдельный компонент на массив, отдельный компонент на детальный товар

Так оно и работает, там ещё в product-item штуки 3 компонентов будет

Ясно, буду думать спасибо. А если при нажатие передавать id и класть в selectedItems и в модалке отображать уже то что связанно с id?

а зачем? вот вы сделали запрос, получили данные и передали их в компонент ProductDetailsModal который потом и открыли для показа

Ok

Erik Arakelian
я в компоненте Menu вызываю экшен запрос на массив...

Стора вам тут не особо нужна, но допустим она есть. Вы сделали запрос и получили массив данных, этот массив данных вы можете передать как props в компонент модалки - <ProductModalDetails :data="productData" :show="modalShow" /> и уже внутри компонента делать с данными что угодно. Сама модалка помещается, например возле кнопки которая и вызывает эту модалку. Чтобы модалка работала и не ломала вёрстку, нужно использовать порталы. Для Vue 3 они встроены и есть описание в документации, для Vue 2 нужно ставить пакет - https://www.npmjs.com/package/portal-vue. Нажали, получили данные, передали в компонент модалки и сделали так чтобы она отобразилась. В будущем при желании сюда можно ещё и роутинг накрутить

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

Вот допустим у вас есть компонент - <ProductItem id="42"> и метод который вызывается по @click на кнопке. В нём вы делаете ajax-запрос к серверу (пост или гет) с айдишником товара, который вы получили из props компонента ProductItem. Установили в data компонента переменную productData: null и showModal: false. (для <ProductModalDetails :data="productData" :show="showModal" />) Eсли запрос выполнился и всё отлично - установили полученные данные в переменную productData и поменяли флаг showModal на true. Если запрос не выполнился - вывели ошибку.

как делать модалку через флаг или v-model есть в интернете и даже в документации по вью

спасибо за советы, буду пробовать.

если что-то нужно более детальней описать, пиши

👍

что то я не понимаю как мне передать то slug товара, в network не происходит запроса на детальный товар. На сриншоте я выделил эту область, правильно ли все?

а что такое this.product.slug и откуда оно взялось?

потом идет компонент qf-products

ну и дальше компонент get-product

над названием компонентов стоит ещё поработать а как сама стора устроена, её покажите

запросы

Erik Arakelian
list и get

зачем вы и там и там вызываете метод list ?

🤦‍♂️

копипаст меня доконает

что есть, то есть)

вау 😍 Все работает. Полная уверенность того, что все сделанно правильно. Благодарю

промисами займись как Кирил написал)

почитаю про промисы.

Erik Arakelian

Ты в listProducts передаешь слаг, хотя функция принимает только domain. Слаг у тебя принимает функция getProduct

уже решили вопрос