I am trying to load an item into a child component so I can edit the values. I am passing an itemId from the parent to the child as a prop and in the child I call a function store.itemForId(id) to retrieve the itemData from a vueFire/firstore collection. I can retrieve the item document in the child but it loses reactivity. If the firestore Document gets updated externally, the collection in the pinia store and the data in the parent gets updated but the item retrieved in the child does not.
However, if I use the same function in the parent and instead pass the item to the child, the reactivity stays.
This isn’t a solution because I will eventually need to be able to edit the item, but it makes me think the problem lies in the child somehow.
I’ve got a pinia store that gets a projectItems Collection and a projectInfo Document.
projectInfo.itemOrder gives the display order for the items.
// projectStore.js
const projectInfo = useDocument(() => doc(db, projectPath))
const { data:projectItems, promise:itemsPromise } = useCollection(() => collection(db, itemsPath))
function itemForId(id) {
return projectItems.value.find((item) => item.id === id)
}
MyParent.vue
<script setup>
import { useProjectStore } from 'stores/projectStore'
const projectStore = useProjectStore()
const { projectInfo, projectItems } = storeToRefs(projectStore)
</setup>
<template>
<div>Child gets Id</div> <!-- not reactive -->
<template v-for="itemId in projectInfo.itemOrder" :key="itemId">
<IdChild :itemId="itemId" />
</template>
<div>Child gets Item</div> <!-- reactive -->
<template v-for="itemId in projectInfo.itemOrder" :key="itemId">
<ItemChild :item="projectStore.itemForId(itemId)" />
</template>
<div>Raw ItemData</div> <!-- reactive -->
<div>{{ projectItems }}</div>
</template>
IdChild.vue is not reactive
<script setup>
import { useProjectStore } from 'stores/projectStore'
const props = defineProps({ itemId: String })
const projectStore = useProjectStore()
const { projectItems } = storeToRefs(projectStore)
// this seems to be where reactivity is lost. Tried with both ref and without.
// console.log(item) shows it as a RefImpl / Proxy so it seems correct
const item = ref(projectStore.itemForId(props.itemId))
</setup>
<template>
<div>{{ item.name }}</div> <!-- not reactive -->
<!-- this is reactive but seems wrong to have to do for every value -->
<div>{{ projectStore.itemForId(itemId).name }}</div>
<div>Raw ItemData</div> <!-- for troubleshooting... but reactive too -->
<div>{{ projectItems }}</div>
</template>
ItemChild.vue – To troubleshoot I also made this which is reactive but since the item is passed as a prop it’s not editable.
<script setup>
import { useProjectStore } from 'stores/projectStore'
const props = defineProps({ item: Object })
</setup>
<template>
<div>{{ item.name }}</div> <!-- reactive -->
</template>
How do I make a ref to the item in my child reactive?
Or is there something I am not understanding with how the reactivity works?