Vuefire CRUD Todo List App — Part 1
Nathan Magyar
1072

Hi Nathan, thanks so much for this tutorial (part 1 and 2)! This project has been a great learning experience. I do have some issues with it, however, that I hope you could help me resolve. First, I built this app from beginning to end based on your instructions. I was able to successfully connect the app to the firestore database and add list items to that database. However, the list items would not render in the DOM at all without some additional modifications. To resolve this, I add a special hook in order to get a snapshot of the item from the firestore database. I then pushed each snapshotted list item into the todos array in order to render them in the DOM. The hook looks like this:

methods: {
...
},
created(){
todosCollection.get()
.then(snapshot => {
snapshot.forEach(doc => {
let newTodo = doc.data()
newTodo.id = doc.id
this.todos.push(newTodo)
})
})
}

How did you get your list items to render on the DOM without such an approach?

Second issue: There doesn’t seem to be a way to dynamically update the app in order to render the list items on the DOM once they have been added to the database. In other words, I have to click the browser refresh button to see the list items on the screen after they have been added to the database. This same issue seems to also apply to deleting and updating. To resolve this, I added window.location.reload() to each method in order to trigger a page reload whenever I click add, edit, or delete, but this doesn’t seem like a good long-term solution. Here is an example:

deleteTodo(todo) {
todosCollection.doc(todo.id).delete()
.then(() => {
window.location.reload()
})
},

I am really interested in resolving these issues, as they will also apply to some of my other work projects. Could we perhaps touch base via email or something? Is there a way that you could take a look at my app? Is this project visible in GitHub? Let me know how we could get in touch. Thanks Nathan!