I set out to develop a task tracker app using Vue. As I neared completion of the project, I encountered an issue - when adding a new task, it would not change the reminder status unless I reloaded the page. Here is the code snippet from my Home.vue file:
<template>
<AddTask v-show="showAddTask" @add-task="addTask" />
<Tasks
@toggle-reminder="toggleReminder"
@delete-task="deleteTask"
:tasks="tasks"
/>
</template>
<script>
import Tasks from '../components/Tasks'
import AddTask from '../components/AddTask'
import firebase from 'firebase'
import Login from './Login'
import Signup from './Signup'
export default {
name: 'Home',
props: {
showAddTask: Boolean,
},
components: {
Tasks,
AddTask,
Login,
Signup,
},
data() {
return {
tasks: [],
myiid:''
}
},
methods: {
// Methods for adding, deleting, and toggling reminders go here
},
async created() {
this.fetchTasks()
}
}
</script>
If you'd like to test the app yourself, here is the link.