JSFiddle - React, Tailwind, and code Playground

by Fayaz Ahmed

HTML

<div id="app">
  <div>
    <input type="text" v-model="userData.name" placeholder="Name" :class="{ error : userData.inValid }">
    <p class="helper disNone" :class="{ disNone : userData.inValid }">Enter your name</p>
  </div>
  <div>
    <input type="text" v-model="userData.email" placeholder="Email" :class="{ error : userData.inValid }">
    <p class="helper disNone" :class="{ disNone : userData.inValid }">Enter a valid email id</p>
  </div>
  <button :click="submit">Submit</button>
  <p>{{userData}}</p>
</div>

CSS

.helper {
  color: red;
  margin: 0;
  font-size: 12px;
}

.error {
  border: 2px solid red;
}

.disNone {
  display: none;
}

Vue

const app = new Vue({
  el: '#app',
  data: {
    step: 1,
    userData: {
      name: '',
      email: '',
      inValid: true
    }
  },
  methods: {
    submit() {
      if(this.userData.name == "") {
        
      }
    }
  }
});