Button remains always disabled in Vuejs form

Question

I try to make simple login form and the login button must be disabled until I start typing in there:

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

I use it like this:

<script>
export default {

    data() {

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

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

If I understand it correctly, when I type anything in the form !isValidLoginForm should become true and button should be enabled. However is stays always disabled. Must be something silly but I don't know what.

Answer 1

Your app raises some errors which makes it working in the wrong way, the error comes from remember:True which should be 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>




      </div>

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