在 VUE JS 上使用 v-model 访问和修改 JSON 属性答案

【问题标题】：Access and modify JSON property using v-model on VUE JS在 VUE JS 上使用 v-model 访问和修改 JSON 属性
【发布时间】：2019-12-16 15:39:10
【问题描述】：

我生成了一个包含大量嵌套数据的 JSON，其中一个在“操作”中称为“值”的属性用于动态生成的 html 表的每个输入的 v 模型中。最初，该属性设置为 0，输入设置为该值，但是当我更改输入中的值时，它不会反映在 json 中

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
               }
            ]
         },
      ]
   },
]

组件设施、操作和 CAPA 是通过 Axios 从 API 获取的对象，这些数据用于生成表格和输入数据的 json

<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:
    {
        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
        }
    },

【问题讨论】：

是否可以提供一个更简单的示例或更好地解释您要完成的工作？

标签： json vue.js vuejs2 vuetify.js v-model

【解决方案1】：

您需要在此处计算是否有特定原因？使用方法获取数据并将结果保存在变量中似乎更合乎逻辑。然后，您可以像在示例中所做的那样将变量分配给 v-model，它应该可以开箱即用。

data() {
  return {
    operation_data: null
  }
},
mounted() {
  this.fetchData();
},
methods: {
  fetchData() {
    // Get your data here with axios
    this.operation_data = resultOfAxios;
  }
}

关于为什么数据没有反映回来的问题：
计算最初只是一个吸气剂。您必须手动为计算添加 setter 才能更新数据。

【讨论】：