按钮在 Vuejs 表单中始终处于禁用状态

Question

我尝试制作简单的登录表单，并且必须禁用登录按钮，直到我开始在那里输入：

<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 并且应该启用按钮。但是始终处于禁用状态。一定很傻，但我不知道是什么。

Answer 1

你的应用程序引发了一些错误，导致它以错误的方式工作，错误来自于remember:True它应该是remember:true：let app = new Vue({&nbsp; el: '#app',&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; email: '',&nbsp; &nbsp; &nbsp; password: '',&nbsp; &nbsp; &nbsp; remember: True&nbsp; &nbsp; }&nbsp; },&nbsp; computed: {&nbsp; &nbsp; isValidLoginForm() {&nbsp; &nbsp; &nbsp; return this.email && this.password&nbsp; &nbsp; }&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">&nbsp; <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">&nbsp; &nbsp; <div class="modal-dialog " role="document">&nbsp; &nbsp; &nbsp; <div class="card card-shadowed p-50 w-400 mb-0 " style="max-width: 100% ">&nbsp; &nbsp; &nbsp; &nbsp; <h5 class="text-uppercase text-center">Login</h5>&nbsp; &nbsp; &nbsp; &nbsp; <br><br>&nbsp; &nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control" placeholder="Email" v-model="email">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="password" class="form-control" placeholder="Password" v-model="password">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group flexbox py-10">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control custom-checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="custom-control-input" v-model="remember">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="custom-control-indicator"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="custom-control-description">Remember me</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="text-muted hover-primary fs-13" href="#">Forgot password?</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button :disabled="!isValidLoginForm" class="btn btn-bold btn-block btn-primary" type="submit">Login</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </form>