從下拉列表中選擇項目后如何自定義界面？

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 改變你做一個路由器推送來改變路由