I am trying to use a computed property to filter out a specific answer so that I can then use v-if to display this content if it is true, but my answer has an array in it, it only ever has 1 item in the array which is the document I want to run the computed property on.
<script>
import getCollection from '../Composables/getCollection';
import getUser from '../Composables/getUser';
import { computed } from "vue"
export default {
props: ['id'],
setup(props) {
const { user } = getUser()
const { documents: Subscribed } = getCollection(
'Subscribed',
['userId', '==', user.value.uid]
)
console.log(Subscribed)
let Purchased1 = computed(() => Subscribed._rawValue.Purchased1 == 'Purchased1');
return { Subscribed, Purchased1, user, document }
}
}
</script>
The above is my code running the computed property but there is an Array after raw value as you can see below from the console log.
Here is my getCollection code as well
import { ref, watchEffect } from 'vue'
import { projectFirestore } from '../firebase/config'
const getCollection = (collection, query) => {
const documents = ref(null)
const error = ref(null)
// register the firestore collection reference
let collectionRef = projectFirestore.collection(collection)
.orderBy('createdAt')
if (query) {
collectionRef = collectionRef.where(...query)
}
const unsub = collectionRef.onSnapshot(snap => {
let results = []
snap.docs.forEach(doc => {
// must wait for the server to create the timestamp & send it back
doc.data().createdAt && results.push({...doc.data(), id: doc.id})
});
// update values
documents.value = results
error.value = null
}, err => {
console.log(err.message)
documents.value = null
error.value = 'could not fetch the data'
})
watchEffect((onInvalidate) => {
onInvalidate(() => unsub());
});
return { error, documents }
}
export default getCollection
This returns me the subscribed back at the start.
So far I have tried putting the array after _rawvalue like this _raw.value.[0].Purchase1
_raw.value[0].Purchase1 and have not been able to get the raw value any other way than the above methods, normally for this sort of thing I just go
let Purchase1 = computed(() => document._rawValue.Purchase1 == 'Purchase1');
and it works just fine.
If anyone has any ideas or solutions that would be great thanks.