Можно ли связать через v-model свойство объекта в state Vuex?
C API приходит json и записывается в state.
[
{
"id": 23,
"contractor_id": 1,
"number": "1032",
"date": "2022-08-26",
"status": 1,
"import_file": "invoice/invoice [01.09.2022 11:33:01]",
"created_by": 1,
"created_at": "2022-09-01T11:33:01.000000Z",
"updated_at": "2022-09-01T12:28:15.000000Z",
"contractor_name": "Поставщик 1",
"summ": 65000,
"underdelivery": [
{
"id": 8,
"invoice_id": 23,
"store_position_id": 31,
"amount": 5,
"created_by": 1,
"created_at": "2022-09-01T12:28:15.000000Z",
"updated_at": "2022-09-01T12:28:15.000000Z",
"price": 5500,
"sku": "1400-0051",
"name": "Фен",
"summ": 27500
},
// и т.д.
]
},
// и т.д.
]
Эти данные выводятся в таблицу в компоненте, где каждый объект это строка в таблице, а из объектов в underdelivery, формируется вложенная таблица.
<tbody v-for="invoice in getUnderdeliveries" :key="invoice.id">
<tr v-bind:class="{ 'table-active': expandedInvoices.indexOf(invoice.id) != -1 }">
<td @click="expand(invoice.id)" class="col-1">{{ invoice.id }}</td>
.........
</tr>
<tr v-if="expandedInvoices.indexOf(invoice.id) != -1" class="table-active">
<td colspan="8">
<table class="table table-light mt-0 mb-0 table-sm table-bordered table-striped">
<thead class="table-secondary">
......
</thead>
<tbody>
<tr v-for="position in invoice.underdelivery" :key="position.id">
<td class="col-1">{{ position.index }}</td>
<td class="col-1">{{ position.sku }}</td>
<td class="col-1">{{ position.price }}</td>
<td class="col-1">{{ position.amount }}</td>
<td class="col-1">{{ position.summ }}</td>
<td class="col-3">{{ position.name }}</td>
<td class="col-1">
<div class="form-check">
<div class="d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="flexCheckDefault">
</div>
</div>
</td>
<td class="col-1">
<div class="input-group input-group-sm">
<input type="number" min="0"
class="form-control border-0 bg-transparent text-center"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
placeholder="Указать количество">
</div>
</td>
<td class="col-1">
<div class="input-group input-group-sm">
<input type="number" min="0"
class="form-control border-0 bg-transparent text-center"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm" placeholder="Указать количество" >
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Можно ли связать через v-model конкретные поля во вложенном объекте в underdelivery с инпутом в таблице, что бы при изменении в инпуте менялся сразу state? Например this.$store.state.underdeliveries[0]['underdelivery'][1]['amount']. Или всё таки всё придётся обрабатывать через методы?