Récupération données avec firebase
Bonjour à tous,
Je viens solliciter votre aide pour un problème de rafraichissement avec vue.js et Firebase en Bdd ( cloud firestore).
J'arrive parfaitement à rajouter un objet dans ma base de données ( ici une plante )
L'affichage se comporte de manière bizarre. Rien ne s'affiche, sauf si je rajoute dans mon fichier helloWorld.vue , par exemple un <p></p> dans mon code (meme vide)
Tout s'affiche d'un coup, juste en rajoutant une balise dans mon code.
Ma question est la suivante : Pourquoi vue.js n'arrive pas à directement récuperer les objets dans Firebase ?
Merci beaucoup , je tourne en rond la :?
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <template>
<div>
<article v-for="(phyto, idx) in phytotherapie" :key="idx">
<img :src="phyto.image">
<h1>{{ phyto.name }}</h1>
<p>{{ phyto.description }}</p>
<button @click="deletePhyto(phyto.id)">Delete</button>
</article>
<form @submit="addPhyto(name,description,image)">
<input v-model="name" placeholder="Le nom de la plante"><br>
<textarea v-model="description" placeholder="Description de la plante" cols="30" rows="10"></textarea><br>
<input v-model="image" placeholder="Ici l'url de la plante"><br>
<button type="submit">Ajoute une nouvelle plante</button>
</form>
</div>
</template>
<script>
import { db } from '../main'
export default {
name: 'HelloWorld',
data () {
return {
phytotherapie: [],
name: '',
description: '',
image: ''
}
},
firestore () {
return {
phytotherapie: db.collection('phytotherapie').orderBy('createdAt')
}
},
methods: {
addPhyto (name, description, image) {
const createdAt = new Date()
db.collection('phytotherapie').add({ name, image, description, createdAt })
},
deletePhyto (id) {
db.collection('phytotherapie').doc(id).delete()
}
}
}
</script> |
