VueJS - 一长串 v-if 的最佳替代方案是什么

Question

我需要制作一个动态表单，其中管理区域允许某人在表单中添加和重新排列字段。每个字段都有一个类型：日期、复选框、选择、文本、数字等。我为每个字段类型创建了单独的组件，但现在我的表单看起来像这样（给出示例的伪代码）。

<section v-for="field in fields">
    <field-date v-if="field.type === 'date'" v-model="field.value"></field-date>
    <field-select v-if="field.type === 'select'" v-model="field.value"></field-select>
    <field-number v-if="field.type === 'number'" v-model="field.value"></field-number>
    <field-text v-if="field.type === 'text'" v-model="field.value"></field-text>
    <field-checkbox v-if="field.type === 'checkbox'" v-model="field.value"></field-checkbox>
</section>

但这已经变得难以控制，而且只会变得更加失控。但我找不到更简单的方法来做到这一点。也许 field 应该是一个带有 render 方法的对象？但这样的话 if/else 就会被抽象到别处。

Answer 1

使用组件.

<section v-for="field in fields">
    <component :is="'field-' + field.type" v-model="field.value"></component>
</section>