<div id="app" v-cloak>
<component
v-for="field in fields"
:key="field.id"
:is="field.type"
v-bind="field">
</component>
</div>
[v-cloak] {display: none}
Vue.component('textField', {
template:'<div>{{ label }}<input type="text" :id="id"></div>',
data() {
return {
}
},
computed:{
},
props:["label","id"]
});
Vue.component('selectField', {
template:
`<div>
{{ label }}
<select :id="id">
<option v-for="answer in answers" :key="answer.value" :value="answer.value">
{{answer.label}}
</option>
</select>
</div>`,
data() {
return {
}
},
computed:{
},
props:["label","id","answers"]
});
Vue.component('radioField', {
template:
`<div>
{{ label }}<br/>
<div v-for="answer in answers" :key="answer.value">
{{ answer.label }} <input type="radio" :name="id" :value="answer.value" />
</div>
</div>`,
data() {
return {
}
},
computed:{
},
props:["label","id","answers"]
});
const app = new Vue({
el:'#app',
data() {
return {
fields:[
{
'id':1,
'label':'Name',
'type':'textField'
},
{
'id':2,
'label':'Email',
'type':'textField'
},
{
'id':3,
'label':'Movies',
'type':'selectField',
'answers':[
{ value:1,label:"Aa" },
{ value:2,label:"Bb" },
{ value:3,label:"Cc" }
]
},
{
'id':4,
'label':'Food',
'type':'radioField',
'answers':[
{ value:1,label:"Aa" },
{ value:2,label:"Bb" },
{ value:3,label:"Cc" }
]
},
]
}
}
})
This Pen doesn't use any external CSS resources.