Property doesn't change value

Question

I'm making a basic form and I wanted to make the button visible only if all the fields were valid.

TEMPLATE:

<template>
  <main>
    <form @submit="send" method="POST">
      <input id="name" type="text" placeholder="Nome" required minlength="3" maxlength="25" v-model="nome" @input="checkName" />
      <div class="err">{{errName}}</div>
      <input id="lastName" type="text" placeholder="Cognome" required minlength="3" maxlength="25" v-model="cognome" @input="checkLastName" />
      <div class="err">{{errLastName}}</div>
      <input id="email" type="email" placeholder="Email" required minlength="7" v-model="email" @input="checkEmail" />
      <div class="err">{{errEmail}}</div>
      <input id="password" type="password" placeholder="Password" required minlength="3" maxlength="25" v-model="password" @input="checkPass" />
      <div class="err">{{errPass}}</div>
      <button :style="buttonStyle" type="submit">INVIA</button>
    </form>
  </main>
</template>

SCRIPT (only the data()):

data() {
    return {
      nome: '',
      cognome: '',
      email: '',
      password: '',

      errName: '',
      errLastName: '',
      errEmail: '',
      errPass: '',

      validName: false,
      validLastName: false,
      validEmail: false,
      validPass: false,

      validForm: (this.validName && this.validLastName && this.validEmail && this.validPass),
      buttonStyle: (this.validForm) ? 'display: block' : 'display: none'
    }
  }

I was expecting this.validForm to become true once all the others were true, but instead, it stays false no matter what I do.

Some things I tried:

1. Setting all valid* to true // DIDN'T WORK

validName: true,
validLastName: true,
validEmail: true,
validPass: true,

2. Setting validForm to true // DIDN'T WORK

validForm: true,
buttonStyle: (this.validForm) ? 'display: block' : 'display: none'

3. Swapping the returns on buttonStyle // SHOWED THE BUTTON

buttonStyle: (this.validForm) ? 'display: none' : 'display: block'

As I said, the last try actually showed the button...but it's obviously not what I wanted.
I'm new to Vue so I'm still learning all the functionalities.

Answer 1

Summary:

Without seeing any of your logic I couldn't tell you how to fix the boolean but instead of using the buttonStyle property you should use v-if .

v-if will make your component render ONLY when the boolean inside of it is true.

Example:

var isTrue = true;


<button v-if='1 < 2'></button>      // Will Render
<button v-if=isTrue></button>       // Will Render
<button v-if='1 + 1 == 7'></button> // Will NOT Render

Documentation:

Here's the documentation if you'd like to look into it more:

https://v2.vuejs.org/v2/guide/conditional.html

Answer 2

Hi first at form tag you need @submit.prevent='submit' . For errors at data() you can make array error:[] and push input errors your with unique name.

(errors:[] need to be empty if you want to do it like this)

At button tag

<button :diabled="errors.length !== 0">sadasasd</button>

(if errors.length in data() is not 0 it is true else its false ).

But you should use vuex and store errors there.

I hope this solves you problem