Можно ли связать через 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']. Или всё таки всё придётся обрабатывать через методы?


Ответы (0 шт):