Iterate through Vue component fields - json

Question

I have a Vue component with lots of properties (> 40). It is a form for editing some business entity. The flow is the following:
On mounted() load the data as json from server and initialize component properties
Edit the data as required
Put all the properties into json structure and send back to server to update data
The properties in my component are named exactly the same as in json structure. I want to iterate through properties in my component and create json structure with 1 line of code instead of doing something like this:
var data = {
field1 = this.field1,
field2 = this.field2,
field3 = this.field3
...
field40 = this.field40
}
I use TS and vue-class-component, so the component code looks 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);
}
}

Answer 1

You could wrap your fields in a model field in your data:
data:{ model:{}}
Then on mounted you could set reactive props in your model
mounted(){
for(let field in YOUR_JSON_OBJ){
Vue.set(this.model, field , YOUR_JSON_OBJ[field])
}
}
Then when you need to submit form, just pass your vue model prop
YOUR_SUBMIT_METHOD(JSON.stringify(this.model))

Answer 2

I can see two ways to do this.
Provide a list of properties in an array, if you know it in advance (this is better practice as the data property gets initiated in the right way):
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);
}
}
}
The second way is to store a list of properties when you load the data from the server using Object.keys() and store this as a data property. You will then need to use vm.$set to ensure all of the properties have the correct reactivity, and you will not be able to have the properties at the root level, instead you will need to nest them (see the vue docs). However I assume that if your view object is designed to react to these properties then you must know them in advance.