根据v-if渲染组件

Question

我有一个Bootstrap的b下拉项，在这里我调用相同的视图，并重定向必须在视图或另一个视图中加载组件的元素的选择。另一方面，如果在视图和下拉菜单ID的内容中显示一个组件或另一个组件，则使用V指令。 有人可以帮我吗？ 谢谢

Answer 1

为当前选定的选项data: { selectedOption: "" }

创建一些状态

将其绑定到您的选择字段。 <select v-model="selectedOption">... your options here <select>

现在，您可以创建一个计算属性来解析您的组件。 （如果您具有以下组件，则此示例有效：A和B）

computed: { 
   resolveComponent(){ 
      if(this.selectedOption === 'a')
         return A;
      else if(this.selectedOption === 'b')
         return B;
   } 
}

现在您可以将此动态组件绑定到组件元素：

<component :is="resolveComponent"></component>