Auto lowercase input in Vue.js

Auto lowercase user input in Vue.js

by nightprogrammer95

HTML

<div id="app">
  <h2>Enter email address</h2>
  <div class="email-container">
     <label for="email1">Email 1:</label>
     <input id="email1" class="email-input" 
            v-model="emailAddress1" 
            placeholder="nightprogrammer95@gmail.com">  
  </div>
   <div class="email-container">
     <label for="email2">Email 2:</label>
     <input id="email2" class="email-input" 
            v-model="emailAddress2" 
            v-on:keyup="handleInputOnKeyup" 
            placeholder="nightprogrammer95@gmail.com">  
  </div>
   <div class="email-container">
     <label for="email3">Email 3:</label>
     <input id="email3" class="email-input" 
            v-model="emailAddress3" 
            v-on:change="handleInputOnChange" 
            placeholder="nightprogrammer95@gmail.com">  
  </div>
</div>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

.email-container {
  padding: 8px 0px;
}

.email-input {
  width: 300px
}

Vue

new Vue({
  el: "#app",
  data: {
    emailAddress1: null,    
    emailAddress2: null,    
    emailAddress3: null
  },
  watch: {
  	emailAddress1(newVal) {
    	this.emailAddress1 = this.emailAddress1.toLowerCase()
    }
  },
  methods: {
  	handleInputOnKeyup() {
			this.emailAddress2 = this.emailAddress2.toLowerCase()
    },
    handleInputOnChange() {
      this.emailAddress3 = this.emailAddress3.toLowerCase()
    }
  }
})