使用选择选项显示不同的组件答案

【问题标题】：Show different component using select option使用选择选项显示不同的组件
【发布时间】：2021-03-09 09:51:38
【问题描述】：

我需要根据所选选项显示不同的组件。我不知道如何编写显示组件一或二的代码。有没有可用的例子？

<template>
  <div class="col-md-3 md-form mr-2">
    <i class="fa fa-envelope prefix grey-text"></i>
    <label class="font-weight-light mb-2">Component</label>
    <select v-model="comp" class="form-control">
      <option value="">Select your component to show</option>
      <option value="">Show component 1</option>
      <option value="SentenceSelected">Show component 2</option>
    </select>
  </div>
</template>

import SuspensionSelected from '../precautonary/mix/SuspensionSelected'
import SentenceSelected from '../precautonary/mix/SentenceSelected'

export default {
  name: "PrecautionCreate",
  components: {
    SuspensionSelected,
    SentenceSelected
  },
  data: () => ({
    selectedyear: '',
    selectedcause:'',
    comp: ''  
  })
};

enter image description here

【问题讨论】：

标签： javascript vue.js select vuejs2 vue-component

【解决方案1】：

您可以使用dynamic component：

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

演示：

SuspensionSelected = {
  template: `<div>Suspension Component</div>`
}

SentenceSelected = {
  template: `<div>Sentence Component</div>`
}

new Vue({
  el: "#app",
  name: "PrecautionCreate",
  components: {
    SuspensionSelected,
    SentenceSelected
  },
  data: () => ({
    selectedyear: '',
    selectedcause:'',
    comp: ''  
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <i class="fa fa-envelope prefix grey-text"></i>
  <label class="font-weight-light mb-2">Component</label>
  <select v-model="comp" class="form-control">
    <option value="">Select your component to show</option>
    <option value="SuspensionSelected">Suspension</option>
    <option value="SentenceSelected">Sentence</option>
  </select>

  <component :is="comp"></component>
</div>

【讨论】：