Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script>
/**
* @property validator
**/
export default {
name: "Control",
props: {
field: {
type: String,
},
type: {
type: String,
},
label: {
type: String,
},
help: {
type: String,
},
},
inject: [
'form',
'validator',
],
computed: {
isInvalid() {
return this.validator.has(this.field)
},
error() {
return this.validator.first(this.field)
}
},
}
</script>
<template>
<div class="element">
<label :for="field" class="label">
{{ label }}
</label>
<textarea
v-if="type === 'textarea'"
:name="field"
v-model="form[field]"
class="input"
:class="{invalid: isInvalid}"
@input="validator.forget(field)">
</textarea>
<input
v-else
:name="field"
:type="type"
v-model="form[field]"
class="input"
:class="{invalid: isInvalid}"
@input="validator.forget(field)"
/>
<p class="help" :class="{invalid: isInvalid}">
{{ error || help }}
</p>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.