Quasar q-tabs：如何通过代码动态显示/隐藏 q-tab？答案

【问题标题】：Quasar q-tabs: how to dynamically show/hide q-tab by code?Quasar q-tabs：如何通过代码动态显示/隐藏 q-tab？
【发布时间】：2021-04-24 02:14:43
【问题描述】：

有一个下拉列表，如果用户选择一个选项，一些 q-tab-panel 将显示/隐藏以做出响应。但是如何通过代码动态设置 q-tab-panel 显示/隐藏？希望有人可以在这里提出建议。谢谢

             <q-select filled
                        v-model="datasource.datasourcetype"
                        :options="datasource.options"
                        option-value="value"
                        option-label="label"
                        emit-value
                        map-options
                        :label="ui.datasourcetype" />
              <q-tabs v-model="dataEntryTab"
                      dense
                      class="bg-grey-2 text-teal"
                      align="left">
                <q-tab name="tabCustomized" v-if="dataentry.showOptionsTab" icon="mail" :label="ui.datasourceOptions" />
                <q-tab name="tabEntryInfo" v-if="dataentry.showDataEntryTab" icon="alarm" :label="ui.datasourceEntryInfo" />
                <q-tab name="tabCascadeField" v-if="dataentry.showCascadeFieldTab" icon="movie" :label="ui.datasourceCascadeField" />
              </q-tabs>
             <q-tab-panels v-model="dataEntryTab" animated>
                <q-tab-panel name="tabCustomized">
                  <q-input :label="ui.dataentryOptions"
                           v-model="dataentry.options"
                           filled
                           type="textarea" />
                </q-tab-panel>
                <q-tab-panel name="tabEntryInfo">

                </q-tab-panel>
                <q-tab-panel name="tabCascadeField">

                </q-tab-panel>
              </q-tab-panels>

例如，有 3 个 q-tabs，如果用户只想让其中 2 个显示，而其中 1 个在选择下拉选项后隐藏。

【问题讨论】：

标签： vue.js quasar

【解决方案1】：

有一个关于 q-select 的事件@input，我们可以为每个 q-tab 触发一个模型变量。它对我有用

onDataSourceTypeChanged (event) {
  var dstype = this.datasource.datasourcetype
  if (dstype === 'datasourcetype.Customized') {
    this.dataentry.showOptionsTab = true
    this.dataentry.showDataEntryTab = false
    this.dataentry.showCasacdeFieldTab = false
  } else {
    this.dataentry.showOptionsTab = false
    this.dataentry.showDataEntryTab = true
    this.dataentry.showCasacdeFieldTab = true
  }
}

【讨论】：