如何在 vanilla Vue.js 中检查密码匹配？

Question

I'm new to Vue.js and I'd like to check if passwords are matched. If they do not match, after the user leaves the confirmation field, the error text Passwords don't match! should appear. I've seen a couple of solutions which involve using plugins, but I'm wondering what is the idiomatic way to do it using pure vue.js?

https://jsfiddle.net/Babrz/L2md63j7/3/

<div id="app">
          <form >
          <div class="form-group">            
            <input type="email" class="form-control" placeholder="Email">            
          </div>
          <br>
          <div class="form-group">
            <input type="password" class="form-control" v-model="password" placeholder="Password">
          </div> 
          <br>

         <div class="form-group">
            <input type="password" class="form-control" v-model="password2" placeholder="Confirm Passwrd">
          </div>
          <small v-if="showError">Passwords don't match!</small>
          <br>

          <div class="form-group">

            <input type="text" class="form-control" placeholder="Age">            
          </div>         

           <br>

          <button type="submit" class="btn login-btn">Register</button>
        </form>
</div>

new Vue({
  el: "#app",
  data: {
    email: '',
    password: '',
    password2: '',
    age: 0,
    showError: false    
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

Answer 1

It sounds like you want to use an onblur event to run a validation on the two password values. A very basic implementation might look like this.

...

<input  v-on:blur="validate" type="password" class="form-control" v-model="password2" placeholder="Confirm Passwrd">
...

...
new Vue({
  el: "#app",
  data: {
    email: '',
    password: '',
    password2: '',
    age: 0,
    showError: false
      
    

  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    },
    validate: function() {
        console.log(this.password === this.password2)
    }
  }
})
...

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

You can get a lot of help if you use something like validate.js to validate your passwords too.

http://validatejs.org