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> |
Partager