I've created a Vue component that has over 40 properties which represent a form for editing a business entity. The process flow goes as follows:
- Upon mounting, the data is fetched from the server in JSON format and used to initialize the component properties
- The data is edited as needed
- All the properties are then structured into JSON format and sent back to the server for updating
All the properties in my component have the same names as those in the JSON structure. I'm looking for a way to iterate through the properties in my component and create the JSON structure with just one line of code, instead of manually assigning each property like this:
var data = {
field1 = this.field1,
field2 = this.field2,
field3 = this.field3
...
field40 = this.field40
}
Using TypeScript and vue-class-component, my component code looks something like this:
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);
}
}