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

Question

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

<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

使用 component.

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

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

VueJS - What's the best alternative to a long list of v-if's

forms

vue.js

vuejs2

vue-component

dynamic-forms