Как сделать каждое поле дат уникальными для каждой строки?

Question

[Алексей]

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

<tr v-for="i in AllInformation" :key="i.id" :id="i.data.number">
            <td><input type="text" readonly v-model="i.data.number"></td>
            <td>
              <select v-model="i.data.flight.is_loaded" style="max-width: 125px !important">
                <option value="true">Груженый</option>
                <option value="false">Порожний</option>
              </select>
            </td>
            <td>
              <input class="telegram-input" type="text" v-model="i.data.flight.agreement_number"
                style="margin: 0 !important;" />
            </td>
            <td>
              <autocomplete-input :variants="stations" :variantKey="'id'" :label="'Станция отправления'"
                :variantTitle="'name'" v-model="i.data.flight.departure_station_name" :need-full="true"
                @selected="getFullStationDeparture" style="width: 100%; height: 100%"></autocomplete-input>
            </td>
            <td>
              <autocomplete-input :variants="stations" :variantKey="'id'" :label="'Станция назначения'"
                :variantTitle="'name'" v-model="i.data.flight.destination_station_name" :need-full="true"
                @selected="getFullStationDestination" style="width: 100%; height: 100%"></autocomplete-input>
            </td>
            <td>
              <input class="telegram-input" type="text" v-model="i.data.flight.invoice.cargo_sender_name"
                style="margin: 0 !important;" />
            </td>
            <td>
              <input class="telegram-input" type="text" v-model="i.data.flight.invoice.cargo_recipient_name"
                style="margin: 0 !important;" />
            </td>
            <td>
              <autocomplete-input :variants="cargo_codes" :variantKey="'id'" :label="'Код груза'"
                :variantTitle="'code6'" v-model="i.data.flight.cargo_code"
                style="width: 100%; height: 100%"></autocomplete-input>
            </td>
            <td>
              <select name="" id="" style="max-width: 125px !important" v-model="i.data.wagon_type">
                <option v-for="wagType in wagonTypes" :key="wagType">
                  {{ wagType }}
                </option>
              </select>
            </td>
            <td>
              <input type="date" v-model="period_begin" :id="i.data.number">
            </td>
            <td>
              <input type="date" v-model="period_end" :id="i.data.number">
            </td>
            <td>
              <button class="Delete" style="margin: 0 !important"
                @click="deleteCurrentRow(i.data.number)">Удалить</button>
            </td>
          </tr>

Comments

[Вадим]

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

Ну либо в data должен быть массив по элементу на каждую строку и ссылка на конкретный элемент в массиве чтобы сделать с ним связку в v-model.