如何解决Vue:当我更改控制台日志时,数据仅在第一次渲染时传递给子级,刷新时会删除
我要将数据从一个文件(store.js)传递到另一个文件(Home.vue),然后尝试将该数据作为道具传递给子组件(卡)。
由于某些原因,第一次渲染时数据不会从存储传递到Home。但是,如果我编辑console.log -即使附带字符串中只有一个字符-则数据将进入并更新我的状态。如果我刷新了,我们回到第一个方框。
我尝试使用created()和Mounted()进行此操作,并添加了一个v-if来检查是否在渲染之前加载了数据。
以下是相关代码:
store.js
const store = {
pictures: null,};
mariaCollection.onSnapshot((mariaRef) => {
const data = [];
mariaRef.forEach((doc) => {
const instance = doc.data();
instance.id = doc.id;
data.push(instance);
});
store.pictures = data;
console.log(store.pictures);
});
export { mariaCollection,db,Timestamp,GeoPoint,store };
Home.vue
<template>
<div>
<h2>Home</h2>
<Cards v-if="dataLoaded" v-bind:imageData="pictures" />
</div>
</template>
<script>
import { store } from "../db";
import Cards from "../components/Cards";
export default {
components: {
Cards,},data() {
return {
test: "test",family: "",pictures: null,dataLoaded: false,};
},created() {
this.pictures = store.pictures;
console.log("created " + JSON.stringify(store.pictures));
this.dataLoaded = true;
},};
</script>
我的控制台的伴随图像:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。