Today I just got dynamic components working in VueJS! This means that I can move forward as planned with allowing user customizable forms without having to serve php rendered html to Vue. This is a huge help given not only my current project/client, but with my plans for InfinityTable.
<template lang="html">
<div class="form">
<component v-for="field in form.children" :field="field" :data="data" :is="field.type">bad component</component>
</div>
</template>
<script>
import Text from './Text'
export default {
props: {
form: {
type: 'object',
required: false,
default: function () {
return {
children: [
{
type: 'Text',
name: 'test',
label: 'Test',
value: 'ttt',
help: 'please fill me out',
validate: '\.+',
required: true
}
]
}
}
},
data: {
type: 'object',
required: false,
default: function () {
return {
test: 'fucker'
}
}
}
},
components: {
'Text': Text
}
}
</script>