In my Quasar and Vue.js project, I am working on a form where I can add objects to an array for insertion into the database simultaneously. However, I am facing an issue where the additions or deletions in the array only reflect on the screen after focusing on another input on the form. The manipulation of the objects in the array is happening correctly, but the changes are not immediately visible on the screen until I interact with another input element. Here's the code snippet:
<template>
<form>
<q-input
v-model = "eventTitle"
label = "Event title"
/>
<div
v-for = "(task, index) in tasks" :key = "index"
>
<q-btn
label = "Remove Task"
@click = "removeTask(index)"
/>
<q-input
v-model = "task.title"
label = "Title"
/>
<q-input
v-model = "task.date"
label = "Date"
/>
<q-input
v-model = "task.desc"
label = "Description"
/>
</div>
<q-btn
label = "Add Task"
@click = "addTask"
/>
</form>
</template>
<script>
export default {
setup () {
const singleTask = {
title: '',
date: '',
desc: ''
}
var tasks = []
return {
tasks,
singleTask
}
},
methods: {
addTask() {
this.tasks.push(this.singleTask)
},
removeTask(index) {
this.tasks.splice(index, 1)
}
}
}
</script>
Furthermore, editing one field in an object seems to affect others as well, presenting another challenge. If anyone has any suggestions or solutions to address these issues, I would greatly appreciate it as this is new territory for me.
Thank you in advance for your insights and responses.