I have reviewed similar posts on "DOM not updating", but have yet to find a solution. I am working on a task app and it can successfully load, add, and delete tasks from Firestore. However, I'm facing two issues and would like to address the first one. Even though the Vuex store array is updated correctly when adding or deleting data, the DOM does not update dynamically. It only reflects the changes upon page reload.
I've shared the code for both the component and the store below. While I believe I'm looking in the right direction, I suspect there might be something I'm missing.
Thank you in advance
Store code:
import Vue from 'vue'
import Vuex from 'vuex'
// import firebase from 'firebase'
import router from '@/router'
import db from '@/db'
import firebase from '@/firebase'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
// State object properties
},
mutations: {
// Mutations methods
},
actions: {
// Actions methods
},
getters: {
// Getters methods
}
})
This is the component (Vue app -> Home -> Grid -> Tasklist (this):
<template>
<!-- Component template -->
</template>
<script>
export default {
data () {
return {
// Data properties
}
},
props: ['Id', 'title'],
computed: {
// Computed properties
},
methods: {
// Methods
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
max-width: 1200px;
}
</style>