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

Question

您好，我目前正在使用 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>

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

非常感谢。

Answer 1

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

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

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

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

Step 2: add a v-if directive to your section, so that it is only visible if the option chosen is the one indicated

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

另一种选择可能是使用 v-router 并使用 watch 来观察你的 selectedTopic，所以当 selectedTopic 改变你做一个路由器推送来改变路由