Skip to content

Instantly share code, notes, and snippets.

@evertramos
Forked from adamgoose/FormField.vue
Created July 29, 2016 17:32
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save evertramos/3bae0247810556b8b849846c0f123a61 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment