JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<script src="https://unpkg.com/vuelidate@latest/dist/vuelidate.min.js"></script>
<script src="https://unpkg.com/vuelidate@latest/dist/validators.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <custom-input type="text" v-model="senderCity.name" :v="$v.senderCity.name" name="City" placeholder="start typing..."></custom-input><br><br>
  <custom-input type="email" v-model="senderAddress.name" :v="$v.senderAddress.name" name="Address" placeholder="start typing..."></custom-input><br><br>
  <custom-input type="password" v-model="senderContact.name" :v="$v.senderContact.name" name="Contact" placeholder="start typing..."></custom-input>
<pre>{{$v}}</pre>
</div>

JavaScript

Vue.use(window.vuelidate.default)
const { required } = window.validators

Vue.component('custom-input', {
  props: {
    value: {
      type: String,
      required: true
    },
    placeholder: {
      type: String
    },
    v: {
    	type: Object,
      required: true
		},
    name: {
      type: String,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  template: `<input :type="type" :value="value" @input="input" :placeholder="placeholder">`,
  methods: {
  	input($e) {
    	this.$emit('input', $e.target.value);
      this.v.$touch();
    }
	}
});

new Vue({
  el: '#app',
  data: {
    senderCity: {
      name: '',
      options: [],
      ref: ''
    },
    senderContact: {
      name: '',
      options: [],
      ref: ''
    },
    senderAddress: {
      name: '',
      options: [],
      ref: ''
    }
  },
  validations: {
    senderCity: {
      name: { required },
    },
    senderContact: {
      name: { required },
    },
    senderAddress: {
      name: { required },
    }
  }
});