A vue component for a simple contact form

baseContactForm.vue

<template>
  <section
    class="base-contact-form row justify-between"
    data-cy="base-contact-form"
  >
    <q-field
      class="q-my-md col-12 col-lg-5"
      v-for="(field, index) in $options.inputs"
      :key="index"
      :error="$v.baseContactFormData[index].$error"
      :error-label="field.errorLabel"
    >
      <q-input
        v-if="showTextFields(field, index)"
        v-model="baseContactFormData[index]"
        :type="field.type"
        @keyup="writeData(section, `${index}`, baseContactFormData[index])"
        @input="delayTouch($v.baseContactFormData[index])"
        :placeholder="`${toRegularForm(index)}:`"
        :data-cy="inputPrefix('input', index)"
        :autocomplete="field.autocomplete"
        :after="[{ icon: 'warning', error: true }]"
      />
      <!-- Work around for an issue that exists in "VUE-THE-MASK"
           https://github.com/vuejs-tips/vue-the-mask/issues/44
      -->
      <q-input
        v-else-if="showZipCode(field, index)"
        v-model="baseContactFormData[index]"
        v-mask="['#####']"
        :type="field.type"
        @keyup="writeData(section, `${index}`, baseContactFormData[index])"
        @input="delayTouch($v.baseContactFormData[index])"
        :placeholder="`${toRegularForm(index)}:`"
        :data-cy="inputPrefix('input', index)"
        :autocomplete="field.autocomplete"
        :after="[{ icon: 'warning', error: true }]"
      />
      <q-input
        v-else-if="showCellPhone(field, index)"
        v-model="baseContactFormData[index]"
        v-mask="['(###) ###-####']"
        :type="field.type"
        @keyup="writeData(section, `${index}`, baseContactFormData[index])"
        @input="delayTouch($v.baseContactFormData[index])"
        :placeholder="`${toRegularForm(index)}:`"
        :data-cy="inputPrefix('input', index)"
        :autocomplete="field.autocomplete"
        :after="[{ icon: 'warning', error: true }]"
      />
      <!-- END WORK around for issue that exists in "VUE-THE-MASK"
           https://github.com/vuejs-tips/vue-the-mask/issues/44
      -->
      <q-select
        v-else-if="field.type === 'select'"
        v-model="baseContactFormData[index]"
        :options="states"
        @input="writeData(section, `${index}`, baseContactFormData[index])"
        :placeholder="toRegularForm(index)"
        :data-cy="inputPrefix('select', index)"
      >
      </q-select>
    </q-field>
  </section>
</template>

<script>
  import ContentData from './baseContactForm.json';
  import {
    email,
    maxLength,
    minLength,
    required,
  } from 'vuelidate/lib/validators';
  import { mapState } from 'vuex';
  import formDataMethods from '../../mixins/formDataMgmt';

  export default {
    name: 'BaseContactForm',
    props: [
      'section',
      'writeData',
      'states',
    ],
    mixins: [formDataMethods],
    computed: {
      ...mapState({
        baseContactFormData: state => state.applications.provider.contactInfo,
      }),
      isValid() {
        return !this.$v.$invalid;
      },
    },
    created() {
      this.assignContentToInstance(ContentData);
    },
    mounted() {
      this.$emit('baseFormValidation', this.isValid);
    },
    data() {
      return {};
    },
    validations: {
      baseContactFormData: {
        fullName: { required },
        email: { required, email },
        streetAddress: { required },
        city: { required },
        state: { required },
        zipCode: {
          required,
          minLength: minLength(5),
          maxLength: maxLength(5),
        },
        cellPhone: { required, minLength: minLength(14) },
      },
    },
    methods: {
      showTextFields(field, index) {
        return (field.type === 'text' && (index !== 'zipCode') && index !== 'cellPhone');
      },
      // WORK AROUND METHOD FOR VUE-THE-MASK
      showZipCode(field, index) {
        return field.type === 'text' && index === 'zipCode';
      },
      // WORK AROUND METHOD FOR VUE-THE-MASK
      showCellPhone(field, index) {
        return field.type === 'text' && index === 'cellPhone';
      },
    },
    watch: {
      isValid() {
        this.$emit('baseFormValidation', this.isValid);
      },
    },
  };
</script>

<style lang="stylus">
  @import '~variables'
  .base-contact-form
    input::placeholder
      font-size 14px
</style>