Question

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

在mount（）上，从服务器将数据加载为json并初始化组件属性
根据需要编辑数据
将所有属性放入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);
  } 
}

Answer 1

我可以看到两种方法。

如果事先知道，则在数组中提供属性列表（这是更好的做法，因为data属性以正确的方式初始化）：

const props=['field1','field2', ...];
export default {
  async mounted(){
     //load the data and ensure only the expected properties are mounted
     //this avoids any unexpected behaviour.
     const result = await loadMyData();
     for(let prop of props) this[prop]=result[prop];
  }
  data(){
    //instantiate the data object to ensure all the properties are reactive
    const data={};
    for(let prop of props) data[prop]=null;
    return data;
  }
  methods:{
    async updateServer(){
       //build the data object to send back to the server then send it.
       const data={};
       for(let prop of props) data[prop]=this[prop];
       await sendUpdate(data);
    }
  }
}

第二种方法是使用Object.keys()从服务器加载数据时存储属性列表，并将其存储为数据属性。然后，您将需要使用vm.$set以确保所有属性都具有正确的反应性，并且您将无法在根级别拥有这些属性，而是需要将它们嵌套（请参阅{{3} }。但是，我假设如果您的视图对象旨在对这些属性做出反应，那么您必须事先知道它们。

Answer 2

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

data:{ model:{}}

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

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

然后，当您需要提交表单时，只需传递您的vue模型道具

YOUR_SUBMIT_METHOD(JSON.stringify(this.model))

遍历Vue组件字段

2 个答案: