How to obtain a specific document from Firebase in Vue - firebase

Question

How to obtain and display a single document from a list of documents from Firebase Firestore data?
I’m able to grab the collection of documents and display the information but I just want to grab one so I can display it elsewhere without duplicating multiple elements with data.
Firebase example:
DocID: title - “Pizza”
DocID: title - “Pancakes”
DocID: title - “Cereal”
Vue template example:
H1-tag {{display the title of Pizza here}} h1tag
Is there a way to do this without having multiple h1 elements with different titles?

Answer 1

DocID: title - “Pizza” DocID: title - “Pancakes” DocID: title - “Cereal”
One of the options:
Must be an array or convert to an array. And then receive data from it.
items: [
{
title: 'Pizza',
price: ''
},
{
title: 'Pancake',
price: ''
},
{
title: 'Cereal',
price: ''
}
]
<h1>{{items[0].title}}</h1>
vue3
setup () {
const items = ref([])
db.collection('products').onSnapshot((snapshotChange) => {
items.value = []
snapshotChange.forEach((doc) => {
items.value.push({
key: doc.id,
title: doc.data().title,
price: doc.data().price
})
})
})
return {
items
}
}