按钮在 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({

  el: '#app',

  data() {

    return {

      email: '',

      password: '',

      remember: True

    }

  },

  computed: {

    isValidLoginForm() {

      return this.email && this.password

    }

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <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>