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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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>