Fieldset
<k-fieldset>
The Fieldset component is a wrapper around manual field component creation. You simply pass it an fields object and a v-model and all field components will automatically be created including a nice field grid. This is the ideal starting point if you want an easy way to create fields without having to deal with a full form element.
<template>
<k-fieldset v-model="contact" @input="input" :fields="{
name: {
label: 'Your Name',
type: 'text',
required: true
},
email: {
label: 'Email Address',
type: 'email',
required: true
},
message: {
label: 'Your Message',
minlength: 140,
required: true,
type: 'textarea'
}
}" />
</template>
<script>
export default {
data() {
return {
contact: {
name: null,
email: null,
message: null
}
}
},
methods: {
input() {
// the data is automatically updated
console.log(this.contact);
}
}
};
</script>
Props
fields
Object (default: null)
validate
Boolean (default: false)
If true, all fields will show their validation status on the fly.
value (v-model)
Object (default: null)
Methods
focus(name)
Focus a specific field in the fieldset or the first one if no name is given
hasFieldType(type)
Check if a particular field type exists
hasField(name)
Check if a field with the given name exists in the fieldset
Events
input
Triggered whenever any field value changes
CSS Class
.k-fieldset