[Form Group Component] Vuejs form group component wrapper using bootstrap-vue and vee-validate #vuejs #validation #bootstrap

FormGroupInput.vue

<template>
  <ValidationProvider :rules="rules" :name="$attrs.label">
    <b-form-group slot-scope="{ valid, errors }" :label="$attrs.label" :invalid-feedback="errors[0]">
      <b-input
          :state="errors[0] ? false : (valid ? true : null)"
          :name="$attrs.label.toLowerCase()"
          :type="$attrs.type"
          :placeholder="$attrs.placeholder"
          v-model="innerValue" />
    </b-form-group>
  </ValidationProvider>
</template>

<script>
import { ValidationProvider } from 'vee-validate'

export default {
  props: [
    'rules',
    'value'
  ],
  components: {
    ValidationProvider
  },
  data: () => ({
    innerValue: ''
  }),
  watch: {
    // Handles internal model changes.
    innerValue (newVal) {
      this.$emit('input', newVal)
    },
    // Handles external model changes.
    value (newVal) {
      this.innerValue = newVal
    }
  },
  created () {
    if (this.value) {
      this.innerValue = this.value
    }
  }
}
</script>