Как обновить документ Firebase / Firestore, не создавая отдельной страницы с формой, которая представляет обновление всего документа?

Question

Я создаю веб-приложение, в котором пользователь может обновлять записи людей в своей организации.Каждая запись имеет «статус», который является «активным» или «неактивным».Вместо того, чтобы создавать страницу редактирования человека, я хочу отобразить таблицу, в которой все записи с их статусом находятся в виде тумблера «вкл. Или выкл.» Для представления того «активного / неактивного» состояния, которое хранится в 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" не определено.Помогите пожалуйста!