vue.js - V-If 和 V-else 问题（Vue 和 Firebase 实时数据库）

Question

我正在使用 Vue 和 Firebase-Real-time Database 开发一个 Web 应用程序。在 Youtube 中的几个教程之后，我设法包含了所有 CRUD 功能。现在的问题是，当通过 v-if/v-else 更改用户的 {Edit:} 条件时，我无法显示或隐藏某个元素。下面是代码；

<template>
    <div class="row">
    <div class="container">
        <table class="table table-striped">

            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>ID</th>
                    <th>Actions</th>
                </tr>
            </thead>

                <tbody v-for="userProfile in Users" :key="userProfile.key">
                <tr v-if="userProfile.edit"> 
                    <td>{{userProfile.username}}</td>
                    <td>{{userProfile.email}}</td>
                    <td>{{userProfile.userId}}</td>

                    
                    <td>

                    <button @click.prevent="updateUser(userProfile.key)" class="btn btn-primary"> Update </button>
                            
                    <button @click.prevent="removeUser(userProfile.key)" class="btn btn-danger">Delete</button>

                    </td>
                </tr>

                <tr v-else>
                    
                        <td> <input type="text" v-model="userProfile.username"> </td>
                        <td> <input type="text" v-model="userProfile.email"> </td>
                        <td> <input type="text" v-model="userProfile.userId"> </td>

                        <td>
                        
                        <button @click.prevent="saveUser(userProfile)" class="btn btn-primary"> Save </button>
                        <button @click.prevent="cancel(userProfile.key)" class="btn btn-danger"> Cancel </button>

                        </td>
            
                </tr>
                </tbody>
        </table>
    </div>
</div>

至于我的剧本

import { usersRef } from '../main.js';

export default {
    data() {
        return {
            Users: [],
        }
    },

    created() {
        usersRef.once('value', (Users) => {
            Users.forEach((doc) => {
                this.Users.push({
                    key: doc.key,
                    email: doc.child('email').val(),
                    username: doc.child('username').val(),
                    userId: doc.child('userId').val(),

                
                })
             })
        })
    },

    methods:{
        removeUser: function(key) {
                usersRef.child(key).remove()
                .then(function() {
                    console.log("deleted Sucessfully");
                    alert("Sucessfully Deleted");
                }).catch(function(error) {
                    console.log(error);
                });
        },
        updateUser: function(key) {

                usersRef.child(key).update({edit:false})
                .then(function() {
                    console.log("update Sucessfully");
                    alert("Sucessfully Update");
                }).catch(function(error) {
                    console.log(error);
                });
        },
        cancel:function(key){
            usersRef.child(key).update({edit:false})
        },

        saveUser:function(userProfile) {
            const key = userProfile.key;
            usersRef.child(key).set({username:userProfile.username,email:userProfile.email,userId:userProfile.userId,edit:true})
            .then(function() {
                    console.log("Saved Sucessfully");
                    alert("Successfully Saved");
                }).catch(function(error) {
                    console.log(error);
                });
        }          
    }
 }

难道我做错了什么？提前致谢！

标签： vue.jsfirebase-realtime-database