从下拉列表中选择项目后如何自定义界面？答案

【问题标题】：How to customize the interface after selecting an item from a drop down list?从下拉列表中选择项目后如何自定义界面？
【发布时间】：2020-10-24 21:20:33
【问题描述】：

您好，我目前正在使用 Vue.js 和 Typescript。我想自定义界面。

有一个下拉列表，选择item后，界面要根据item的上下文进行调整。

<b-form-select
              id="input-topic"
              v-model="form.selectedTopic"
              @change="createForm(form.selectedTopic)"
              :options="dropdownTopics"
              required>
</b-form-select>

如果选择了一个项目，例如采购订单，此部分应动态导入。

<section>
      <h2>{{this.$t('order')}}</h2>

      <b-form-row>
        <b-col>
          <b-form-group :label="this.$t('orderNumber')"  label-for="input-orderNumber">
            <b-form-input
              id="input-orderNumber"
              v-model="form.orderNumber"
              trim></b-form-input>
          </b-form-group>
        </b-col>
      </b-form-row>
</section>

有人知道如何实现这一目标吗？

非常感谢。

【问题讨论】：

标签： javascript typescript twitter-bootstrap vue.js vue-component

【解决方案1】：

有几种方法可以解决此要求。

最简单的方法是使用 v-if 指令

第 1 步：将您选择的选项保存在一个状态中（在组件数据中）

data(){
  form: {selectedTopic: 'two'}
  options: ['one', 'two', 'three']
}

步骤2：添加V-IF指令对您的部分，因此如果选择的选项是指示

的选项，则只能可见

<section v-if="optionSelected === 'two' ">
...
</section>

另一个选项可能是使用 v-router 并使用 watch 来观察您的 selectedTopic，因此当 selectedTopic 更改时，您可以使用路由器推送来更改路由

【讨论】：