Objective: The main goal is to have a form interface loaded with an object's current data for editing. This allows the user to open a modal with the form already filled out with the existing information, giving them the option to either edit it or leave it as is.
Current Progress: At the moment, the form successfully loads with data from three objects (details, editSubEvents, instructions) and displays without any issues.
Issue at Hand: However, the problem arises when attempting to edit the fields and submit the changes. Currently, only the submitted data object is dumped to confirm that the necessary information is obtained. While the eventID remains unchanged and retrieved from the original object, storing the new title, instruction, and subEvents (as an array) becomes essential for submission since they differ from the initial ones.
Solution Needed: How can one effectively store the new information from these input fields, particularly ensuring that the new subEvent title and instructions are stored as an array?
<div class="modal-body">
<div class="form-group row" v-for="detail in details">
<p class="modal-title">Title</p>
<input v-model="detail.title" type="text" class="form-control" id="EventTitle" name="eventTitle">
</div>
<div class="form-group row" v-for="subEvent in editSubEvents">
<p class="modal-title">SubEvent Title</p>
<input v-model="subEvent.title" type="text" class="form-control" id="newSubTitle" name="newSubTitle">
<p class="modal-title">SubEvent Instructions</p>
<textarea v-model="subEvent.instructions" type="text" class="form-control" id="newSubInstructions" name="newSubInstructions"></textarea>
</div>
</div>
data() {
return {
details: [],
instructions:[],
editSubEvents:[],
}
},
methods: {
updateEvent() {
let data = {
EventID: this.details[0].event_id,
title:
origin:
instructions:
subEvents: //needs to be an array
};
console.dir(data);
}
}