DOM теперь обновляется, удаляется должным образом.Я немного изменяю структуру компонентов.Теперь это: Vue app -> Home -> Grid -> Tasklist -> TaskListItem.Я все еще сталкиваюсь со следующей проблемой: Добавление элемента обновляет DOM, но когда я добавляю несколько записей, например, с разными заголовками, они записываются в Firestore корректно, но в DOM он показывает их все как идентичные, пока я не выполню полную перезагрузку.
Пожалуйста, найдите код ниже:
Магазин:
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: {
appTitle: 'My Awesome App',
taskFormVisible: false,
addedTask: false,
loadedTasks: false,
deletedTasks: false,
user: null,
error: null,
loading: false,
tasks: [],
task: {
title: '',
description: '',
tags: [],
dueTime: '',
dueDate: '',
reminderFlag: Boolean,
quadrant: '',
userId: '',
timestamp: ''
}
},
// Mutations (synchronous): change data in the store
mutations: {
setUser (state, payload) {
state.user = payload
state.task.userId = firebase.auth().currentUser.uid
},
setError (state, payload) {
state.error = payload
},
setLoading (state, payload) {
state.loading = payload
},
addedTask (state, payload) {
state.addedTask = payload
},
loadedTasks (state, payload) {
state.loadedTasks = true
},
deletedTask (state, payload) {
state.deletedTask = payload
},
DELETE_TASK (state, payload) {
state.tasks = state.tasks.filter(task => {
return task.taskId !== payload
})
},
ADD_NEW_TASK (state, payload) {
// algorithm to remove, e. g. by id
// console.log(payload)
state.tasks.push(payload)
/* state.tasks = state.tasks.filter(e => {
return e.id !== payload
}) */
},
GET_TASKS (state, payload) {
state.tasks = payload
},
MAKE_TASKFORM_VISIBLE (state, payload) {
state.taskFormVisible = payload
}
},
// Actions (asynchronous/synchronous): change data in the store
actions: {
autoSignIn ({ commit }, payload) {
commit('setUser', { email: payload.email })
},
userSignUp ({ commit }, payload) {
commit('setLoading', true)
firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
.then(firebaseUser => {
commit('setUser', { email: firebaseUser.user.email })
commit('setLoading', false)
router.push('/home')
commit('setError', null)
})
.catch(error => {
commit('setError', error.message)
commit('setLoading', false)
})
},
userSignIn ({ commit }, payload) {
commit('setLoading', true)
firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
.then(firebaseUser => {
commit('setUser', { email: firebaseUser.user.email })
commit('setLoading', false)
commit('setError', null)
router.push('/home')
})
.catch(error => {
commit('setError', error.message)
commit('setLoading', false)
})
},
userSignOut ({ commit }) {
firebase.auth().signOut()
commit('setUser', null)
router.push('/')
},
makeTaskformVisible ({ commit }) {
if (this.state.taskFormVisible === false) {
commit('MAKE_TASKFORM_VISIBLE', true)
} else {
commit('MAKE_TASKFORM_VISIBLE', false)
}
},
addNewTask ({ commit }, payload) {
db.collection('tasks').add({
title: payload.title,
userId: firebase.auth().currentUser.uid,
createdOn: firebase.firestore.FieldValue.serverTimestamp(),
description: payload.description,
dueDateAndTime: payload.dueTimestamp,
reminderFlag: payload.reminderFlag,
quadrant: payload.quadrant,
tags: payload.tags,
updatedOn: firebase.firestore.FieldValue.serverTimestamp()
})
.then(() => {
commit('ADD_NEW_TASK', payload)
})
.catch(error => {
commit('setError', error.message)
})
},
getTasks ({ commit }) {
// commit('loadedTasks', false)
db.collection('tasks').orderBy('createdOn', 'desc').get().then(querySnapshot => {
querySnapshot.forEach(doc => {
const data = {
'taskId': doc.id,
'title': doc.data().title,
'quadrant': doc.data().quadrant
}
this.state.tasks.push(data)
})
// commit('loadedTasks', true)
commit('GET_TASKS', this.state.tasks)
})
},
deleteTask ({ commit }, payload) {
db.collection('tasks').doc(payload).delete().then(() => {
commit('DELETE_TASK', payload)
}).catch(function (error) {
// console.error('Error removing document: ', error)
commit('setError', error.message)
})
}
},
// Getters: receive data from the store
getters: {
isAuthenticated (state) {
return state.user !== null && state.user !== undefined
}
}
})
TaskList:
<template>
<ul>
<li>
<h4>{{title}}</h4>
</li>
<li v-for="task in tasks" :key="task.taskId" v-if="task.quadrant === Id" class="collection-item">
<task-list-item v-bind:task="task"></task-list-item>
</li>
</ul>
</template>
<script>
import TaskListItem from './TaskListItem'
export default {
components: {
'task-list-item': TaskListItem
},
data () {
return {
}
},
props: ['Id', 'title'],
computed: {
tasks () {
return this.$store.state.tasks
}
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
TaskListItem:
<template>
<div>{{task.title}} ({{task.taskId}})<v-spacer></v-spacer>
<v-scroll-x-transition>
<v-btn flat icon color="primary" v-show="!deleteConfirmation">
<v-icon>edit</v-icon>
</v-btn>
</v-scroll-x-transition>
<v-scroll-x-transition>
<v-btn flat icon color="primary" v-show="!deleteConfirmation" @click="deleteConfirmation = !deleteConfirmation">
<v-icon>delete</v-icon>
</v-btn>
</v-scroll-x-transition>
<v-scroll-x-transition>
<v-btn flat icon color="green" v-show="deleteConfirmation" @click="deleteConfirmation = !deleteConfirmation">
<v-icon>cancel</v-icon>
</v-btn>
</v-scroll-x-transition>
<v-scroll-x-transition>
<v-btn flat icon color="red" v-show="deleteConfirmation" @click="deleteConfirmation = !deleteConfirmation; deleteTask(task.taskId)">
<v-icon>check_circle</v-icon>
</v-btn>
</v-scroll-x-transition>
</li>
</div>
</template>
<script>
export default {
data () {
return {
deleteConfirmation: false
}
},
props: ['task'],
computed: {
},
methods: {
deleteTask (taskId) {
this.$store.dispatch('deleteTask', taskId)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>