Question

我正在创建一个Web应用程序，用户可以在其中使用和更新其组织内人员的记录。每个记录都有一个“状态”，该状态是“活动”或“非活动”。我不想创建一个编辑页面，而是要显示一个表，该表显示所有记录的状态，将其状态切换为“开或关”以表示存储在Firestore中的“活动/非活动”状态。

我不知道如何双向切换此开关。当我们更新表时，它会更新Firestore数据库。并且如果在Firestore中更新了一条记录，则切换开关将在前端反映该更改。

我已经通过CSS创建了切换器，但是Firebase内的数据没有更新，并且我收到一条错误消息，提示未定义“ this.peep”

<template>
    <div class="admin-add-people">
        <h1>Add a Employee</h1>
        <form @submit.prevent="addPerson">
            <div class="uk-margin">
                <input placeholder="First Name" class="uk-input" type="text" name="fname" v-model="fname">
            </div>
            <div class="uk-margin">
                <input placeholder="Last Name" class="uk-input" type="text" name="lname" v-model="lname">
            </div>
            <div class="uk-margin">
                <input placeholder="Group" class="uk-input" type="text" name="group" v-model="group">
            </div>
            <div class="uk-margin">
                <select placeholder="Status" class="uk-select" type="select" name="status" v-model="status">
                    <option value="" disabled selected>Please choose</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>
           <div class="uk-margin">
            <button class="btn primary" type="submit">Add Person</button>
            </div>
        </form>
    </div>
</template>

<script>
import db from '@/firebase/init'

export default {
    name: 'AdminAddPeople',
    data() {
        return {
            people: []
        };
    },
    methods: {
        addPerson() {
            if(this.fname) {
                this.feedback = null
                // create a slug
                this.slug = slugify(this.fname + this.lname, {
                    replacement: '-',
                    remove: /[$*_+~>()'"!\-:@]/g,
                    lower: true
                })
                db.collection('people').add({
                    fname: this.fname,
                    lname: this.lname,
                    group: this.group,
                    status: this.status,
                    slug: this.slug,
                id: this.slug
                }) .then(() => {
                    this.$router.push({ name: 'AdminPeople' })
                })
            } else {
                this.feedback = 'You must enter a First name'
            }
        }
    },
    created() {
        db.collection('people').get()
        .then(snapshot => {
            snapshot.forEach(doc => {
                let peep = doc.data()
                peep.id = doc.id
                this.people.push(peep);
            })
        })
    }
}
</script>

预期结果应该是刷新数据库后在数据库中更新记录以及前端上的切换开关。我一直得到的结果是“ this.peep”未定义。请帮忙！

如何在不使用提交整个文档更新的表单创建单独页面的情况下更新Firebase / Firestore文档？

0 个答案: