title: How to see if all fields are filled in a form with Vue
body: <p>I have a form with in between the <code>&lt;template&gt;</code> tags</p>
  <pre><code>&lt;form&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;email&quot;&gt;Email address&lt;/label&gt;
    &lt;input v-model=&quot;email&quot; for=&quot;email&quot; type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Enter email&quot; required&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;name&quot;&gt;Name&lt;/label&gt;
    &lt;input v-model=&quot;name&quot; for=&quot;name&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Name&quot; required&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
    &lt;input v-model=&quot;password&quot; type=&quot;password&quot; class=&quot;form-control&quot; for=&quot;password&quot; placeholder=&quot;Password&quot; required&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;Confirm&quot;&gt;Confirm Password&lt;/label&gt;
    &lt;input v-model=&quot;confirmPassword&quot; type=&quot;password&quot; class=&quot;form-control&quot; for=&quot;Confirm&quot; placeholder=&quot;Confirm Password&quot; required&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group form-check&quot;&gt;
    &lt;input type=&quot;checkbox&quot; class=&quot;form-check-input&quot; id=&quot;exampleCheck1&quot; required&gt;
    &lt;label class=&quot;form-check-label&quot; for=&quot;exampleCheck1&quot;&gt;I agree to the terms and conditions&lt;/label&gt;
  &lt;/div&gt;
  &lt;button v-on:click=&quot;Submit&quot; type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
  </code></pre>
    
  <p>I have <code>v-model</code> which is updating the <code>data</code> in the <code>script</code> section in real time.</p>
  <p>The <code>data</code>:</p>
  <pre><code>data(){
  return{
    email: undefined,
    password: undefined,
    confirmPassword: undefined,
    name: undefined
  }
  </code></pre>
  <p>},</p>
  <p>I expect <code>undefined</code> to be updated by <code>v-model</code></p>
  <p>On clicking The form's button the <code>Submit</code> method is called.</p>
  <p>The <code>Submit</code> method:</p>
  <p>prints empty if input is <code>empty</code> and <code>passed</code> if the input is not empty (works as expected)</p>
  <p>prints <code>empty</code> if input is empty and <code>empty</code> even if both the inputs are filled (not as expected)</p>
  <pre><code>methods:{
  Submit(){
  
    console.log(this.email); //prints the data in entered in the form correctly
    console.log(this.name);  //prints the data in entered in the form correctly
    console.log(this.password); //prints the data in entered in the form correctly
    console.log(this.confirmPassword); //prints the data in entered in the form correctly
  
    if(this.email == undefined){ console.log('Empty')} //prints empty if input is `empty` and `passed` if the input is not empty (works as expected)
    else{console.log('passed')};
  
  
    if(this.email || this.name == undefined){console.log('Empty');} //prints `empty` if input is empty and `empty` even if both the inputs are filled (not as expected) 
    else {console.log('Passed');}
    
   }
  }
  </code></pre>