Vue JS - 基于下拉选择添加动态组件

Question

我是 Vue JS 的新手，我有以下要求

要求：

我有以下值的下拉菜单

在选择每个值时，我想在页面上添加已经定义的下拉组件。 例如：

• 在选择“已关闭”时，将添加下拉组件（可搜索下拉）
• 在选择“已审核”时，用户可以从下拉列表中选择值的另一个下拉组件。 （不可搜索的）。同样......

我有什么：

• 我已经将所有不同类型的下拉菜单作为一个组件。

我尝试了什么：

• 我已经在页面加载时加载了所有四种类型的下拉菜单，我会根据下拉菜单值选择隐藏和显示它们。
• 示例：当用户选择“关闭”选项并隐藏其他组件时，我只显示可搜索的下拉组件。当用户选择“已审核”选项并隐藏其他组件时，我会显示可选的下拉组件。

问题：

• 现在的要求是，用户可以选择任意选项 N 次，并且在每次选择时，应添加相应的下拉组件。
• 此屏幕还具有编辑功能。

注意：

• 将此视为具有以下屏幕的过滤器功能

任何帮助/指针将不胜感激。提前致谢。

Answer 1

首先您应该创建已关闭和已审核的组件

那么，你应该有一个过滤器数组：

data() { return {
  filters: [],
} }

当点击添加过滤器时，您应该将相应的组件推送到过滤器，例如：

methods: {
  addFilter() {
    const component = Created /* */;
    this.filters.push({
      value: null,
      component: component
    })
  }
}

最后以这种方式在模板中渲染它们：

<div v-for="(filter, index) in filters" :key="index">
  <component :is="filter.component" />
</div>

Demo

---

对于And/Or 下拉菜单，您可以使用一些技巧，但我不确定如何实现它们（您可以检查索引是否为零以仅在 个过滤器之间显示它们）