Currently, I am developing an application that allows users to create task lists. These task lists are retrieved from the database once created, enabling users to interact with them by selecting an appropriate response for each task.
The possible responses are 'Yes' or 'No'. When a user selects 'No', a dropdown menu appears with reasons for not completing the task. Choosing the 'other' option will reveal a custom input box for specifying a different reason.
In addition to selecting responses, users can also add comments to each task. Once all tasks are completed, users can submit the form.
My main challenge lies in capturing the form responses due to the dynamic nature of the component displaying each task. While I have enclosed the component in a <form> tag to trigger form submission upon clicking, I am unsure how to extract the data from the component itself.
If you would like to explore the code and provide insights, please check out this CodeSandbox link.
App.vue
<template>
<button @click="toggleComplete">Complete All</button>
<form @submit.prevent="submitModal">
<checklist-item
v-for="taskList in myChecklist.tasks.data"
:key="taskList.id"
:taskDetails="taskList"
:marked="markAll"
>
</checklist-item>
<div class="">
<button class="" type="submit">Submit</button>
</div>
</form>
</template>
... (The rest of the App.vue code as per original text) ...
ChecklistItem.vue
<template>
... (The ChecklistItem.vue template code as per original text) ...
</template>
... (The rest of the ChecklistItem.vue script + style sections as per original text) ...