使用vuejs在下拉列表中选择项目后如何显示表单

Question

如何在使用 vuejs 在下拉列表中选择项目后显示特定表单，我在下面给出了代码....下面的选择选项在 home.vue 中，表单是另一个页面（Light.vue）。

    <div class="row">
        <div class="col-md-12">
       <h3>Select Device To Add</h3>   <select :v-model="device" class="custSelect">
            <option>CCTV </option>
            <option>EV Charger</option>
             <option>Light</option>
          </select>
        </div>
      </div>

下面是我的表单 light.vue

            <template>
              <div>
               <h1>Add Light Data</h1>
                  <form @submit="formSubmit">
                    <div class="row">

                      <div class="col-md-3 pr-md-1">
                       <va-input label="Pole Id"
                                  placeholder=" "
                                  type="text" 
                                  v-model="poleNewId"
                                 required>
                        </va-input>
                      </div>
                   </div>
                 <div class="row">
                  <div class="col-md-14">
                   <va-input label="stid  "
                               v-model="stid"

                              required>
                    </va-input>
                  </div>
                </div>
            </form>
           </div>
        </template>

Answer 1

您可以使用<component :is="selectedCponent"/> https://v2.vuejs.org/v2/api/#component

因此，您需要在下拉列表的值和要呈现的组件之间创建映射。