How to send data?

Question

Vue.js

I can’t figure out how to link the data, I need to send a post request to save records to the database, I need to somehow connect the count and comment inputs with the product, by id. Probably you need to create an array where to put the product id and data from the inputs, but I still don’t understand how to practically and aesthetically implement this, or I even came up with a crutch and there is a normal solution to this problem. With Vue, just a few days is hard work. Usually I add an id input (of type count-1) to the name and decrypt it on the back. Here Vue won't let me do it.

<form id="orderForm" v-on:submit.prevent="sendForm">
      <p><input v-model="subdivision" type="text" placeholder="Наименование структурного подразделения"></p>
      <p><input v-model="phone" type="tel" placeholder="Номер телефона"></p>
      <p><input v-model="email" type="email" placeholder="Email"></p>
      <br>
      <div class="d-flex">
        <div v-for="product, index in products">
          <h3>{{ product.category.name }}</h3>
            <hr>
          {{ product.type.name }}
          {{ product.description }}
          <input name="count" type="text" placeholder="Количество" value="">
          <input name="comment" type="text" placeholder="Примечание" value="">
        </div>
      </div>
      <button type="submit">Сохранить</button>
    </form>

Answer 1

Probably you need to create an array where to put the product id and data from the inputs...

Not necessary. Set the v-model to the appropriate properties of the product object:

<input v-model="product.count" name="count" type="text" placeholder="Количество">
<input v-model="product.comment" name="comment" type="text" placeholder="Примечание">

But right before the query is executed - yes, you can make a separate array, bypass products and get the necessary data from it.