我尝试制作简单的登录表单，登录按钮必须被禁用，直到我开始键入:

<template><div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog " role="document" >
        <div class="card card-shadowed p-50 w-400 mb-0 "  style="max-width: 100% ">
            <h5 class="text-uppercase text-center">Login</h5>
            <br><br>

            <form>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Email" v-model="email">
                </div>

                <div class="form-group">
                    <input type="password" class="form-control" placeholder="Password" v-model="password">
                </div>

                <div class="form-group flexbox py-10">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" v-model="remember">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Remember me</span>
                    </label>

                    <a class="text-muted hover-primary fs-13" href="#">Forgot password?</a>
                </div>

                <div class="form-group">
                    <button :disabled="!isValidLoginForm" class="btn btn-bold btn-block btn-primary" type="submit">Login</button>
                </div>
            </form>



           
        </div>

    </div>
</div></template>

我这样使用它:

<script>
export default {

    data() {

        return {
            email: '',
            password: '',
            remember: True
        }
    },

    computed: {
        isValidLoginForm() {
            return this.email && this.password
        }
    }
}</script>

如果我理解正确，那么当我键入！IsValidLogInform表单中的任何内容时，都应该变为true，并且应该启用button。 然而，它始终处于禁用状态。 一定是什么傻事，但我不知道是什么。