我在做什么
我正在使用vue和firestore制作一个简单的任务组织应用程序。到目前为止，我做了5个功能。
- 登录
- 注册
- 获取并渲染任务列表
- 添加/删除任务
- [无效！]实时呈现任务列表中的任何更改
工作不正常
它从firestore获取和加载数组数据，并实时渲染，但渲染不正确
问题详细信息
当由于从列表中添加或删除任务而更新列表时，此问题会变得明显。
请检查图片以获得更清晰的问题图像。
问题的屏幕截图
我尝试了什么
- 通过刷新页面来解决问题，但失去了实时更新的意义
- 看到设置Vue((/新Vue(。(或者更像是我太初学者了，无法理解这个概念来应用它…(
很可能我不明白背后的真正问题是什么。。。所以，如果有人能告诉我真正的问题是什么，那就太好了。所以期待听到你的想法！
代码
主要有两个文件负责呈现任务列表。
- projectList.vue：获取和加载数组数据并呈现任务列表
- projectCard.vue：在这里我为projectList.vue插入每个任务的数据来创建列表
(我还将添加用于添加项目的脚本；addProject.js只是以防万一。(
projectList.vue：获取、加载、渲染任务列表
<template>
<div class="projectList">
<button class="home-buttons" @click="newProject">Add project</button>
<div v-if="createNew">
<projectAdd/>
</div>
<div v-show="loading">
<Loader/>
</div>
<div v-show="!loading">
<!--03 Pass array data to projectCard.vue then render the list of entries-->
<projectCard v-for="project in projects" :key="project.id" :project="project"/>
</div>
<p v-show="noproject">There is no project</p>
</div>
</template>
<script>
import firebase from '@/firebase/firestore';
import Loader from '@/components/loading.vue';
import projectCard from '@/components/projectCard.vue';
import projectAdd from '@/components/addProject.vue';
export default {
components: {
projectCard,
Loader,
projectAdd,
},
data() {
return {
userid: this.$route.params.userId,
//02 Put array data here
projects: [],
loading: true,
createNew: false,
};
},
created() {
//01 Get datas in realtime then pass an array data to projects: []
const db = firebase.firestore()
.collection('user')
.doc(this.userid) //$route.params.userId
.collection('projects')
.orderBy('createdAt', 'desc');
db
.onSnapshot((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.projects.push(doc.data());
});
if (this.projects.length >= 0) {
this.loading = false;
} else if (this.projects.length <= 0) {
this.loading = false;
}
});
},
methods: {
newProject() {
if (this.createNew !== true) {
this.createNew = true;
} else {
this.createNew = false;
}
},
},
};
</script>
projectCard.vue：在数组中插入每个数据
<template>
<div class="projectCard">
<div class="user-list">
<div class="columns">
<div class="column is-8">
<h3>{{ project.projectname }}</h3>
<p>{{ project.slug }}</p>
<p>Why : {{ project.why }}</p>
<p>{{ project.phase }}</p>
</div>
<div class="column is-4 right">
<router-link class="button is-primary" :to="{ name: 'viewproject', params: { projectId: project.slug }}">
Find out more!
</router-link>
<button @click="deleteProject"> Delete </button>
</div>
</div>
</div>
</div>
</template>
<script>
import firebase from '@/firebase/firestore';
export default {
name: 'ProjectCard',
props: {
// Holds array data from parent-component; projectList.vue
project: Object,
},
methods: {
// Delete a task
deleteProject() {
firebase.firestore().collection('user').doc(this.project.userId)
.collection('projects')
.where('slug', '==', this.project.slug)
.get()
.then((snapshot) => {
snapshot.forEach((doc => {
console.log(doc.data().slug);
doc.ref.delete();
alert('You have deleted the project!' + doc.data().slug);
}))
})
},
},
};
</script>
addProject.js：添加任务(此功能可从projectList.vue中呈现的另一个组件访问(
import firebase from '@/firebase/firestore';
export default {
addProject(createdAt, userId,projectname,why,phase){
const db = firebase.firestore().collection("user")
.doc(userId).collection("projects"); // "Project"という名前のコレクションへの参照を作成
db.add({
createdAt: createdAt,
userId: userId,
projectname: projectname,
why: why,
phase: phase,
slug: this.generateUUID(),
})
.then(function (docRef) {
console.log('Document written with ID: ', docRef.id);
alert('Well done! You have created a new project!');
})
.catch(function (error) {
console.error('Error adding document: ', error);
});
},
generateUUID() {
let d = new Date().getTime();
let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
let r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
},
};
感谢您花费宝贵的时间阅读本文，并帮助我摆脱这一问题！期待着听到你们的一些想法！
这是因为每次触发监听器时，您都会收到查询的整个结果，即与之对应的所有文档。
你基本上有两个选择：
选项1：重新初始化阵列
在填充数组之前重新初始化数组，如下所示：
created() {
const db = firebase.firestore()
.collection('user')
.doc(this.userid) //$route.params.userId
.collection('projects')
.orderBy('createdAt', 'desc');
this.projects = []; <-- See here
db
.onSnapshot((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.projects.push(doc.data());
});
if (this.projects.length >= 0) {
this.loading = false;
} else if (this.projects.length <= 0) {
this.loading = false;
}
});
},
选项2：倾听实际变化
如文档中所述，您可以检测"查询快照之间查询结果的实际更改"。
例如，您只能处理添加，如下所示：
db
.onSnapshot((querySnapshot) => {
querySnapshot.docChanges().forEach((change) => {
if (change.type === "added") {
this.projects.push(change.doc.data());
}
//....
});
//....
});