FormField.vue

<template>
    <div class="form-group" :class="errorClass">
        <label :for="slug">{{ title }}</label>
        <textarea class="form-control" :id="slug" v-model="model" v-if="isTextarea" v-bind="attrs"></textarea>
        <input :type="type" class="form-control" :id="slug" v-model="model" v-if="isInput" v-bind="attrs">
        <select class="form-control" :id="slug" v-model="model" v-if="isSelect" v-bind="attrs">
            <option :value="option" v-for="option in options">{{ option }}</option>
        </select>
        <span class="help-block" v-show="errors" v-text="errorText"></span>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            required: true
        },
        type: {
            type: String,
            required: true
        },
        options: {
            type: Array
        },
        model: {
            type: String,
            required: true,
            twoWay: true
        },
        attrs: {
            type: Object
        },
        errors: {}
    },
    computed: {
        errorClass() {
            return {
                'has-error': this.errors
            }
        },
        slug() {
            return 'form-field-' +
            this.title.toString().toLowerCase()
              .replace(/\s+/g, '-')
              .replace(/[^\w\-]+/g, '')
              .replace(/\-\-+/g, '-')
              .replace(/^-+/, '')
              .replace(/-+$/, '')
        },
        isTextarea() {
            return this.type == 'textarea'
        },
        isSelect() {
            return this.type == 'select'
        },
        isInput() {
            return !this.isTextarea && !this.isSelect
        },
        errorText() {
            if(Array.isArray(this.errors)) {
                return this.errors[0]
            }

            return this.errors
        }
    }
}
</script>