Currently, I am engaged in an exciting project using Vue. Within my Firestore database, I have a document named "default" within the collection "impostazioni" structured like this:
impostazioni/default = {
iniziata: false,
finita: false,
password: "abcd"
}
My goal is to retrieve each individual property and store them within my component. Here's how I've attempted to achieve this:
<template>
{{impostazioni}}
</template>
<script>
export default {
name: "login",
data(){
impostazioni: null
}
},
firestore: {
impostazioni: db.collection('impostazioni').doc('default')
}
}
</script>
When I follow this approach, the template correctly displays the expected output:
{ "finita": false, "iniziata": false, "password": "abcd" }
However, when initializing the data differently:
data(){
return {
iniziata: null,
finita: null,
password: null,
}
},
firestore : {
iniziata: db.collection('impostazioni').doc('default')['iniziata'],
finita: db.collection('impostazioni').doc('default')['finita'],
password: db.collection('impostazioni').doc('default')['password']
}
}
and then attempting to display them in the template:
{{finita}} - {{iniziata}} - {{password}}
This method does not work as intended. It throws an error suggesting that
db.collection('impostazioni').doc('default')On the other hand, if I store the entire document in a single variable "impostazioni" and access its properties like {{impostazioni.password}}, I do obtain the correct value.
Is there a way for me to extract and store the different elements of the document into separate variables?