VueJS 各种元素列表答案

【问题标题】：VueJS list of various elementsVueJS 各种元素列表
【发布时间】：2021-01-23 20:06:11
【问题描述】：

我已经尝试并尝试搜索我所追求的特定用例，但可惜，结果是空的。可能是我在寻找错误的方向，但问题是：

假设我有一个对象数组，其中包含标题字段和输入类型字段等参数。使用这个数组，我想从 vuetify 创建一个对话框，在其中我根据类型字段动态插入相关的输入元素。这可以是输入、单选、复选框，也可以是更奇特的东西，比如 cron 调度。

因此，一种方法是在对话框中设置一个槽，用于输入字段的位置，但这需要对实现此类对话框的子组件进行编码。我在想更多的东西，比如对象数组上的循环，并根据类型字段渲染特定组件，比如 switch-case 系统。

这是我能做的事情吗，这样做是否明智？想听听其他人对此的看法:)

【问题讨论】：

可能你想试试speical attr: is，比如：<div class="row" v-for="(item, index) in items" :key="index"><component v-bind:is="item.inputType"></component></div>;

【解决方案1】：

我认为这可以通过创建一个包含所有内容的巨大表单来完成，并且不渲染不必要的元素，因为

v-if="inputType.includes('text')"

在这种情况下，您可以使用 text-1、text-2、text-n 来呈现多个具有相同类型的表单元素。我认为添加是不可能的，因为即使您设法添加，您如何设置条件、v-modal、事件绑定等。

【讨论】：