时间戳

首页 > 解决方案 > 遍历 Vue 组件字段

json - 遍历 Vue 组件字段

问题描述

我有一个具有很多属性（> 40）的 Vue 组件。它是用于编辑某些业务实体的表格。流程如下：

  1. 在mounted() 上，从服务器将数据加载为json 并初始化组件属性
  2. 根据需要编辑数据
  3. 将所有属性放入json结构并发送回服务器以更新数据

我的组件中的属性命名与 json 结构中的完全相同。我想遍历组件中的属性并使用 1 行代码创建 json 结构，而不是执行以下操作：

var data = {
 field1 = this.field1,
 field2 = this.field2,
 field3 = this.field3
 ...
 field40 = this.field40
}

我使用 TS 和vue-class-component，所以组件代码如下所示：

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  template: ...
})
export default class MyComponent extends Vue {
  field1: Number = null;
  field2: Date = null;
  field3: String = null;
  ...
  field40: Number = null;

  mounted() {
    axios.get(..., response => {
      this.field1 = response.data.field1
      this.field2 = response.data.field2
      this.field3 = response.data.field3
      ...
      this.field40 = response.data.field40
    }
  }

  submit() {
    const data = {
      field1 = this.field1,
      field2 = this.field2,
      field3 = this.field3,
      ...
      field40 = this.field40,
    };

    axios.put(..., data);
  } 
}

标签： jsontypescriptvue.js

解决方案

您可以将字段包装在数据中的模型字段中：

data:{ model:{}}

然后在安装时，您可以在模型中设置反应性道具

  mounted(){
        for(let field in YOUR_JSON_OBJ){
           Vue.set(this.model, field , YOUR_JSON_OBJ[field])
        }
   }

然后当你需要提交表单时，只需传递你的 vue 模型 prop

YOUR_SUBMIT_METHOD(JSON.stringify(this.model))

推荐阅读