Quasar App Extension Form
Form Builder for Quasar
Install
quasar ext add formQuasar CLI will retrieve it from NPM and install the extension.
Uninstall
quasar ext remove formUsage
This examples generates a simple form with an email field, with its value stored on model.email:
<template>
<purple-form :schema="schema" :model="model" />
</template>
<script>
export default {
data () {
return {
model: {}
}
},
computed: {
schema () {
return [
{
component: 'q-input',
modelKey: 'email', // key of the input's value on the model object
props: { // QInput props
dense: true,
label: 'Email',
rules: [
val => !!val || 'Field is required'
]
},
on: {}, // listen to QInput events
attrs: { // component native attributes (like id, type)
type: 'email'
},
hidden: () => this.visible // acts like v-if
}
]
}
}
}
</script>Troubleshooting
The Quasar Auto Import feature doesn't work on the PurpleForm component, so if you're trying to use e.g.
component: 'q-input' and you're seeing unknown custom component 'q-input', you have two options to fix this:
- Add
'QInput'toquasar.conf.js > framework > components - instead of using
component: 'q-input', use the following:
import QInput from 'quasar'
...and on your schema:
{
component: QInput
}If you're using the QInput component on another page of your app, you won't see this problem since the auto import feature will read that.