How to transfer data exactly to the template in which the event occurred - to load the content?

Question

Vue.js

Hello everyone, I'm new to vue, and in general I don't communicate with js as closely as I would like, I have a question, before I always pulled the necessary information through jq.ajax, made a request to the server, there in the controller I passed data to the required template, rendered it, and returned it to jq html, inserted it where necessary. Now I would like to do the same result, but somehow less resource-intensive. Let's say I created 10 product cards, wrote in them

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

How can I, by clicking on any of them, change the data that I requested from the server only for a certain card? For now, I'm changing what's in data; this.title = result.name; But the data changes for all cards, but it is necessary that only the one on which the click worked. Is this somehow done through templates and the props property? You can show it with a live example, otherwise all the manuals and video lessons are considered in some situations remote from real ones, I can’t figure out how to implement it. Thanks in advance)

Answer 1

In general, it seems to me that you need to create a separate component of the product card, where you create some method, for example update (), in which you will make a request to the server (you pass the product id as a parameter), receiving information, writing everything is needed in data, your card will be updated. You will already hang this method on the update button, for example:
In the application itself, you will simply use the output of cards, something like this (before that, do not forget to get a list of products first):

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

Where products is an array of all products received by the api.
That is, you need to create two components: ProductList and Product.