Access and modify JSON property using v-model on VUE JS - json

Question

I generate a JSON with a lot of nested data, one of those properties called 'value' inside 'operations' is used in the v-model of every input of a dynamic generated html table. Initially that property is set to 0 and the input is set with that value but when I change the value in the input it doesn't reflect in the json
The JSON
[
{
"establishment_id":1,
"values":[
{
"capa_id":"A",
"operations":[
{
"operation_id":1,
"value":0
},
{
"operation_id":2,
"value":0
},
{
"operation_id":3,
"value":0
},
{
"operation_id":4,
"value":0
}
]
},
{
"capa_id":"B",
"operations":[
{
"operation_id":1,
"value":0
},
{
"operation_id":2,
"value":0
},
{
"operation_id":3,
"value":0
},
{
"operation_id":4,
"value":0
}
]
},
{
"capa_id":"C",
"operations":[
{
"operation_id":1,
"value":0
},
{
"operation_id":2,
"value":0
},
{
"operation_id":3,
"value":0
},
{
"operation_id":4,
"value":0
}
]
},
]
},
]
The component
Establishments, Operations and CAPA are objects taken from an API via Axios, those data are used to generate the table and the json for the input data
<v-expansion-panels multiple focusable popout class="py-5">
<v-expansion-panel class="expandable" v-for="(establishment, establishmentIndex) in establishments">
<v-expansion-panel-header class="exp_estb">
</v-expansion-panel-header>
<v-expansion-panel-content class="ma-0 pa-0">
<v-row no-gutters>
<v-col cols="12">
<form>
<v-simple-table>
<template>
<thead>
<tr>
<th scope="col">ESTABLECIMIENTO</th>
<th v-for="(operation, index) in operations" scope="col">
{{ operation.description }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(capa, capaIndex) in capas">
<td>{{capa.name}}</td>
<td v-for="(operation, operationIndex) in operations">
<span>{{ operation_data[establishmentIndex].values[capaIndex].operations[operationIndex].value }}</span>
<v-row class="pr-5">
<v-col cols="12" class="mr-2 pr-5">
<v-text-field v-model="operation_data[establishmentIndex].values[capaIndex].operations[operationIndex].value" label="" color="#7F53DD"></v-text-field>
</v-col>
</v-row>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</form>
</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
Computed
computed:
{
operation_data: function()
{
let operation_data=[]
let operationsWithContent=[]
let capasWithOperations=[]
var establishments = Object.values(this.establishments)
var capas = Object.values(this.capas)
var operations = Object.values(this.operations)
operations.forEach(operation => operationsWithContent.push({ operation_id:operation.id, value: 0 }))
capas.forEach(capa => capasWithOperations.push({ capa_id:capa.id, operations:operationsWithContent }))
establishments.forEach( establishment => operation_data.push({ id:establishment.id, values:capasWithOperations}) )
return operation_data
}
},

Answer 1

Is there a specific reason you need a computed here? It seems more logical to fetch your data using a method and saving that result in a variable. Then you can assign the variable to the v-model like you already did in your example and it should work out of the box.
data() {
return {
operation_data: null
}
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
// Get your data here with axios
this.operation_data = resultOfAxios;
}
}
For your question on why the data doesn't reflect back:
A computed is initially just a getter. You have to manually add a setter for the computed for it to be able to update data.