Как передавать данные именно тому темплейту в котором произошло событие — подгрузить контент?

Question

[Alex Mirgorodskiy]

Всем привет, я во vue новичок , да и вообще с js не так тесно общаюсь как хотелось бы, есть вопрос, раньше я всегда необходимую информацию подтягивал через jq.ajax, делал запрос на сервер, там в контроллере передавал данные в необходимый шаблон, рендрил его, и возвращал в jq html, вставлял куда нужно. Сейчас хотелось бы сделать тот же результат, но как-то менее ресурсозатратно. Вот я допустим создал 10 карточек товара, прописал в них

<div  data-id="<?= $id ?>" class='description' >
      <span>{{ title }}</span>
      <span>{{ price }}</span>
      <img  src='{{ price }}' >
<div/>

как мне по клику на любой из них, сделать так чтоб те данные которые я запросил с сервера, изменить только у определенной карточки? Пока что я меняю то что в data; this.tittle = result.name; Но данные меняются у всех карточек, а нужно чтоб только у той на которой сработал клик. Это как-то через темплейты и свойство props делается? Можно показать на живом примере, а то все мануальчики и видео уроки на каких то отдаленных от реальных ситуациях рассматривают, немогу понять как это реализовать. Заранее спасибо)

Comments

[alex]

зачем вам вью, если вы разметку по прежнему на сервере генерируете?

Answer 1

[Алексей Скляров]

Вообще, как мне кажется, вам нужно создать отдельный компонент карточки товара, где вы создаете какой-нибудь метод, например update(), в котором у вас будет происходить запрос на сервер (в качестве параметра вы передаете id товара), получив информацию, записав все нужно в data, карточка у вас обновится. Этот метод вы уже повесите на кнопку обновления информации, например:

<div class="product__update" @click="update">Обновить информацию</div>

В самом приложении будете использовать просто вывод карточек, как-то так (перед этим не забудьте список продуктов получить для начала):

<div v-for="product in products">
      <product :id="product.id" :title="product.title" :image="product.image"></product>
</div>

Где products это массив всех товаров, полученных по апи.

То есть вам требуется создать два компонента: ProductList и Product.