Vuejs Signup/Request Invite/Newsletter Email Component With BootstrapVue and Validation (vuelidate)

<template>  <b-form inline class="justify-content-center" ref="form" @submit.prevent="submit">    <b-form-group invalid-feedback="Email is required" label="Email" label-sr-only label-for="input-email">        <b-input          :state="validateState($v.email)"          v-model="$v.email.$model"          id="input-email"          placeholder="Your email"        ></b-input>      <b-button type="submit" variant="primary">Request Invite</b-button>    </b-form-group>  </b-form></template><script>import { validationMixin } from "vuelidate"import { required, email } from "vuelidate/lib/validators"export default {  mixins: [validationMixin],  data() {    return {      email: null    }  },  validations: {    email: {      required, email    },  },  methods: {    validateState(item) {      const { $dirty, $error } = item      return $dirty ? !$error : null    },    submit() {      this.$v.$touch()      if (this.$v.$anyError)        return false      alert(`Form submitted for ${this.email}`)    }  }}</script>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.