In my Vue project, I am attempting to collect and POST some values to the server. However, I am finding the current implementation to be somewhat frustrating.
Within a Vue method, I have a function that POSTs the collected values from the original object:
var inputValues = {};
// Retrieve values from all inputs
for (key in this.entries) {
var val = this.entries[key].value;
if (val != undefined) {
console.log(key, val);
Vue.set(inputValues, key, val);
}
}
[Here is the AJAX part that sends 'inputValues' to the server - not so relevant]
Below is an overview of the object structure:
entries: {
something1: {
options: {
"option1": "Option 1",
"option2": "Option 2",
"option3": "Option 3"
},
visible: true,
value: undefined
},
something2: {
options: {
"one": "One",
"two": "Two",
},
visible: true,
value: undefined
}
}
While this approach 'works', I feel that there could be room for improvement.
Is there a way to fetch all values of this object like this.entries[].value, or should I store the values of the input fields in a separate object? I am unsure of the correct approach to take.
Any insights would be greatly appreciated.