Используя Vue.js и Firebase, я создаю самый простой CRUD, о котором я только могу подумать.
Когда я «создаю» данные из формы, я могу отправить их в базу данных, но когда я пытаюсь обновить свой локальныйВ массиве объектов нет идентификатора документа, так как он создается firebase при создании нового документа.Итак, как я могу получить новый идентификатор документа без необходимости получать все данные из базы данных?
Для этого должен быть шаблон.Единственное, что я могу придумать, это снова получить 'all' из базы данных.Но есть ли более простой способ?
Есть ли способ вернуть идентификатор обратно компоненту вновь созданного документа?
Вот мой компонент, содержащий только необходимые биты,
<template lang="html">
<div class="crud">
<h1>I am the crud component</h1>
<div v-for="item in peoples" :key="peoples.id" class="peoples">
<h3>name: {{ item.name}} age: {{ item.age}} id: {{ item.id }} <button @click="deletePeople(item.id)">delete</button> </h3>
</div>
<form @submit.prevent="addPerson()">
<div>
<label for="name">Name:</label>
<input type="text" name="name" v-model="name">
</div>
<div>
<label for="age">Age:</label>
<input type="number" name="age" v-model="age">
</div>
<div>
<button>add person to database</button>
</div>
</form>
</div>
</template>
<script>
import db from '@/firebase/init'
export default {
name: 'Crud',
data(){
return {
msg: 'hello all',
peoples: [],
name: null,
age: null
}
},
methods:{
addPerson(){
console.log('addPerson() method running');
console.log('person: ' + this.name);
db.collection('people').add({
name: this.name,
age: this.age
}).then(() => {
db.collection('people').get().then(snapshot => {
this.peoples = []
snapshot.forEach(doc => {
// console.log(doc.data(), doc.id);
let people = doc.data()
people.id = doc.id
this.peoples.push(people)
})
})
// console.log('push to local data');
// this.peoples.push({ name: this.name, age: this.age})
})
},
Любая помощь будет принята с благодарностью,
Спасибо