Make components usable with v-bind:is as dynamic components #1078
Description
- [-] I have searched the issues of this repository and believe that this is not a duplicate.
What problem does this feature solve?
When creating dynamic UIs (e.g. dynamic forms), components need to be used with <component v-bind:is="comp-name"></component> option.
Currently many of the components are not usable in dynamic mode.
What does the proposed API look like?
Make consistent use of component attributes, and accept dynamic data values, so that any component can be replaced on the fly with any other component.
For example, the below should generate a dynamic form with whatever components you decide on the fly at runtime for any data schema.
<a-form direction="horizontal">
<a-form-item v-for="(field, key) in schema" :key="key" :label="label(field, key)">
<component
:is="ComponentForType(field.type)"
v-model="field.value"
:type="field.type"
:options="field.options"
:min ="field.min"
:max ="field.max"
:placeholder="field.placeholder"></component>
</a-form-item>
</a-form>
ComponentForType: function(type) {
switch(type){
case 'checkbox': return "a-checkbox";
case 'date': return "a-date-picker";
case 'number': return "a-input-number";
case 'password': return "a-input";
case 'radio': return "a-radio-group";
case 'select': return "a-select";
case 'textarea': return "a-input";
default: return "a-input";
}
}
Currently this is NOT possible since the properties of these components are not compatible with each other.