How to Add a TAB in Vue/Quasar?

Question

I try put a new Tab in the screen, call a Component to navigate, I look the code and Itś all right, but show me the message:

[Vue warn]: Property or method "showTabDentistaHoras" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

I can not understanding why?

This is the Code of the Tmeplate:

<template>
  <div class="layout-padding">
    <toolbar-edition
      v-if="whichMethod"
      goBack
      :method="whichMethod"
      user="prestador" />

    <q-tabs
      color="indigo"
      v-model="selectedTab"
      @select="getData(currentItem.pessoa.id)"
      class="sou-tab text-white font-pattern">
      <q-tab
        default
        :disable="disableTab(tabs.dados.index)"
        @select="changeSelectedTab(tabs.dados.name)"
        :name="tabs.dados.name"
        slot="title"
        :label="$t('person.data')"
        class="text-white" />

      <q-tab
        slot="title"
        :disable="disableTab(tabs.endereco.index)"
        @select="changeSelectedTab(tabs.endereco.name)"
        :name="tabs.endereco.name"
        :label="$t('general.addresses')"
        class="text-white" />

      <q-tab
        slot="title"
        :disable="disableTab(tabs.banco.index)"
        @select="changeSelectedTab(tabs.banco.name)"
        :name="tabs.banco.name"
        :label="$t('bankDetails.description')"
        class="text-white" />

      <q-tab
        slot="title"
        :disable="disableTab(tabs.responsaveis.index)"
        @select="changeSelectedTab(tabs.responsaveis.name)"
        :name="tabs.responsaveis.name"
        :label="$t('person.responsibles')"
        class="text-white" />

      <q-tab
        v-if="showTabSubscriberGroup"
        slot="title"
        :disable="disableTab(tabs.grupoAssinantes.index)"
        @select="changeSelectedTab(tabs.grupoAssinantes.name)"
        :name="tabs.grupoAssinantes.name"
        :label="$t('subscriberGroup.legalResponsibleGroup')"
        class="text-white" />

      <q-tab
        v-if="showTabDentista"
        slot="title"
        :disable="disableTab(tabs.dentista.index)"
        @select="changeSelectedTab(tabs.dentista.name)"
        :name="tabs.dentista.name"
        :label="$t('prestador.dentists')"
        class="text-white" />

      <q-tab
        v-if="showTabDentistaHoras"
        slot="title"
        :disable="disableTab(tabs.dentistaHoras.index)"
        @select="changeSelectedTab(tabs.dentistaHoras.name)"
        :name="tabs.dentistaHoras.name"
        :label="$t('prestador.dentist')"
        class="text-white" />  

      <q-tab
        v-if="showTabEquipamentoHomologado"
        slot="title"
        :disable="disableTab(tabs.equipamentoHomologado.index)"
        @select="changeSelectedTab(tabs.equipamentoHomologado.name)"
        :name="tabs.equipamentoHomologado.name"
        :label="$t('prestador.equipmentsHomologated')"
        class="text-white" />

      <q-tab
        v-if="showTabCoverageArea"
        slot="title"
        :disable="disableTab(tabs.areaAbrangencia.index)"
        @select="changeSelectedTab(tabs.areaAbrangencia.name)"
        :name="tabs.areaAbrangencia.name"
        :label="$t('prestador.coverageArea')"
        class="text-white" />

      <q-tab
        slot="title"
        v-if="showTabContract"
        :disable="disableTab(tabs.contrato.index)"
        @select="changeSelectedTab(tabs.contrato.name)"
        :name="tabs.contrato.name"
        :label="$t('transporter.contract')"
        class="text-white" />

      <q-tab
        v-if="showTabDownload"
        slot="title"
        @select="changeSelectedTab(tabs.downloadContract.name)"
        :name="tabs.downloadContract.name"
        :label="$t('general.downloads')"
        class="text-white" />

      <q-tab
        v-if="showTabDocuments"
        slot="title"
        :disable="disableTab(tabs.documents.index)"
        @select="changeSelectedTab(tabs.documents.name)"
        :name="tabs.documents.name"
        :label="$t('transporter.documents')"
        class="text-white" />

      <q-tab
        v-if="showTabConclude"
        slot="title"
        :disable="disableTab(tabs.conclude.index)"
        @select="changeSelectedTab(tabs.conclude.name)"
        :name="tabs.conclude.name"
        :label="$t('transporter.conclude')"
        class="text-white" />

        <q-tab-pane
          :name="tabs.dados.name"
          class="background-pattern font-pattern sou-tab-pane">

          <div
            class="row gutter wrap">
            <div
              class="col-xs-12 col-sm-12 col-md-1 col-lg-1 col-xl-1 pr-10">
              <q-input
                disable
                id="input-create-prestador-pessoa-id"
                name="id"
                v-model="currentItem.pessoa.id"
                :float-label="$t('general.code')"
                class="full-width"
                type="number"/>
            </div>
            <div
              class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 pr-10">
              <sou-input-mask
                id="input-create-prestador-cpf-cnpj"
                :disable="!isAdministrador || isVisualization"
                v-model="currentItem.pessoa.cpf_cnpj"
                :float-label="$t('general.cnpj')"
                mask="cnpj"
                name="cpf_cnpj"
                v-validate="'required|validCnpj'"
                :error="errors.has('cpf_cnpj')"
                required
                class="full-width"
                type="text"/>
            </div>
            <div
              class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 pr-10">
              <q-input
                id="input-create-prestador-nome"
                :disable="!canEdit()"
                v-model="currentItem.pessoa.nome"
                class="full-width"
                :float-label="$t('person.socialName')"
                type="text"
                name="razao_social"
                v-validate="'required'"
                :error="errors.has('razao_social')"
                :max-length="100"
                required/>
            </div>
            <div
              class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 pr-10">
              <q-input
                id="input-create-prestador-nome-fantasia"
                :disable="!canEdit()"
                v-model="currentItem.pessoa.nome_fantasia"
                v-validate="'required'"
                name="nome_fantasia"
                :error="errors.has('nome_fantasia')"
                class="full-width"
                :float-label="$t('person.fantasyName')"
                :max-length="100"
                type="text"
                required/>
            </div>
          </div>

          <div
            class="row gutter wrap">
            <div
              :class="isAdministrador ? fourColumns : sixColumns">
              <q-input
                id="input-create-prestador-inscricao-estadual"
                :disable="!canEdit()"
                v-model="currentItem.pessoa.inscricao_estadual"
                :float-label="$t('person.stateRegistration')"
                name="inscricao_estadual"
                :error="errors.has('inscricao_estadual')"
                :max-length="20"
                class="full-width"
                type="text"/>
            </div>
            <div
              :class="isAdministrador ? fourColumns : sixColumns">
              <q-input
                id="input-create-prestador-inscricao-municipal"
                :disable="!canEdit()"
                v-model="currentItem.pessoa.inscricao_municipal"
                :float-label="$t('person.municipalRegistration')"
                name="inscricao_municipal"
                :error="errors.has('inscricao_municipal')"
                :max-length="20"
                class="full-width"
                type="text"/>
            </div>
            <div
              v-if="isAdministrador"
              :class="isAdministrador ? fourColumns : sixColumns">
              <q-select
                :disable="isVisualization"
                id="input-create-prestador-status"
                v-model="currentItem.pessoa.status"
                :options="$t('person.arrayStatus')"
                radio
                :float-label="$t('general.status')"
                name="status"
                v-validate="'required'"
                :error="errors.has('status')"
                required/>
            </div>
          </div>

          <div
            class="row gutter wrap">
            <div
              class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 pr-10">
              <sou-input-mask
                id="input-create-prestador-cnae"
                :disable="!canEdit()"
                v-model="currentItem.pessoa.cnae"
                :float-label="$t('person.cnae')"
                mask="9999-9/99"
                required
                class="full-width"
                type="text"/>
            </div>
            <div
              class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 pr-10">
              <q-input
                id="input-create-prestador-cnes"
                :disable="!canEdit()"
                v-model="currentItem.pessoa.cnes"
                class="full-width"
                :float-label="$t('storageClinic.cnes')"
                type="text"
                name="cnes"
                :maxLength="16"
                :error="errors.has('cnes')"/>
            </div>
            <div
              class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 pr-10">
              <sou-input-mask
                id="input-create-prestador-cro"
                :disable="!canEdit()"
                v-model="currentItem.pessoa.cro"
                v-validate="'required'"
                :mask="'999999999999999'"
                name="cro"
                :error="errors.has('cro')"
                class="full-width"
                :float-label="$t('general.croPersonLegal')"
                type="text" />
            </div>
            <div
              class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 pr-10">
              <select-state
                id="create-prestador-select-cro-uf"
                :disable="!canEdit()"
                ref="selectState"
                v-model="currentItem.pessoa.cro_uf"
                v-validate="'required'"
                :maxLength="2"
                name="croUf"
                :error="errors.has('croUf')"
                class="full-width"
                :float-label="$t('storageClinic.croUf')"
                type="text"
                required/>
            </div>
          </div>

          <div
            class="row gutter">
            <div
              class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 pr-10">
              <q-input
                id="input-create-prestador-site"
                :disable="!canEdit(false)"
                v-model="currentItem.pessoa.site"
                class="full-width"
                :float-label="$t('general.site')"
                :maxLength="100"
                required
                type="text"/>
            </div>

            <div
              class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 pr-10">
              <q-input
                id="input-create-prestador-linkedin"
                :disable="!canEdit()"
                v-model="currentItem.pessoa.linkedin"
                class="full-width"
                :maxLength="80"
                :float-label="$t('general.linkedin')"
                required
                type="text" />
            </div>
          </div>

          <div
            class="row gutter wrap">

            <div
              class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 pr-10">
              <q-input
                id="input-create-prestador-twitter"
                :disable="!canEdit(false)"
                v-model="currentItem.pessoa.twitter"
                class="full-width"
                :float-label="$t('general.twitter')"
                :maxLength="100"
                required
                type="text" />
            </div>

            <div
              class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 pr-10">
              <q-input
                id="input-create-prestador-facebook"
                :disable="!canEdit(false)"
                v-model="currentItem.pessoa.facebook"
                class="full-width"
                :float-label="$t('general.facebook')"
                :maxLength="100"
                required
                type="text" />
            </div>

            <div
              class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 pr-10">
              <q-input
                id="input-create-prestador-instagram"
                :disable="!canEdit(false)"
                v-model="currentItem.pessoa.instagram"
                class="full-width"
                :float-label="$t('general.instagram')"
                :maxLength="100"
                required
                type="text"/>
            </div>
          </div>
          <phone
            ref="personPhone"
            :disable="!canEdit(false)"
            :typeLayout="'h'"></phone>
          <div
            class="mt-20 col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 pr-10 text-black"
            v-if="loginTemp && loginTemp.status">
            {{ $t('general.status') }}: {{ loginTemp.status }}
          </div>
          <div
            class="mt-20 col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 pr-10 text-black"
            v-if="isNecessaryAdjustdments">
            {{ $t('general.refuseReason') }}: {{ loginTemp.justificativa_rejeicao }}
          </div>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.endereco.name"
          class="background-pattern font-pattern sou-tab-pane">
        <Address
          ref="address"
          bodyHeight="calc(100vh - 350px)"
          :idPessoa="currentItem.pessoa.id"
          :perfilUtilizador="perfilUtilizador"
          :read-only="!canEdit(false)"
          :idPerfil="perfilCompany.id_perfil_empresa"/>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.banco.name"
          class="background-pattern font-pattern sou-tab-pane">
          <bank-data
            ref="bankData"
            :dados-bancarios="currentItem.dados_bancario"
            :read-only="!canEdit(false)"/>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.responsaveis.name"
          class="background-pattern font-pattern sou-tab-pane">
          <responsible
            :perfilUtilizador="perfilUtilizador"
            bodyHeight="calc(100vh - 380px)"
            :idPessoaEmpresa="currentItem.pessoa.id"
            :idPerfil="perfilCompany.id_perfil_empresa"
            :read-only="!canEdit()"
            ref="responsavel"/>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.grupoAssinantes.name"
          class="background-pattern font-pattern sou-tab-pane">
          <div>
            <subscriber-group
              :perfilUtilizador="perfilUtilizador"
              ref="grupoAssinante"
              :showSubMessage="isLoginTemporario"
              :subMessageOne="$i18n.t('subscriberGroup.thisTabCreateSubscriberGroupsAdhesionTerm')"
              :subMessageTwo="$i18n.t('subscriberGroup.youNeedAtLeastOneSubscriberGroupToSignAdhesionTerm')"
              bodyHeight="calc(100vh - 370px)"
              funcionalidade="prestadorGrupoAssinantes"
              @sizeList="sizeListSubscribers"
              :apiResource="resources"
              :idPessoa="currentItem.pessoa.id"
              :read-only="!canEdit()"
              :idPerfil="perfilCompany.id_perfil_empresa"
              style="padding: 0px" />
          </div>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.dentista.name"
          class="background-pattern font-pattern sou-tab-pane">
          <dentist
            ref="dentistaHoras"
            :isLoginTemporario="!!(loginTemp && loginTemp.id_status)"
            :read-only="!canEdit(false)"
            :isVisualization="isVisualization"
            :idPrestador="currentItem.pessoa.id"
            style="padding: 0px"
            bodyHeight="calc(100vh - 350px)"/>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.dentistaHoras.name"
          class="background-pattern font-pattern sou-tab-pane">
          <dentistaHoras
            ref="dentistaHoras"
            :isLoginTemporario="!!(loginTemp && loginTemp.id_status)"
            :read-only="!canEdit(false)"
            :isVisualization="isVisualization"
            :idPrestador="currentItem.pessoa.id"
            style="padding: 0px"
            bodyHeight="calc(100vh - 350px)"/>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.equipamentoHomologado.name"
          class="background-pattern font-pattern sou-tab-pane">
          <span class="text-black text-center" style="padding-bottom: 8px;"> {{ $t('provider.equipmentHomologatedScreen')}} </span>

          <div>
            <q-checkbox
              :disable="!canEdit()"
              v-model="ind_equipamento_homologado"
              :label="$t('clinicEquipment.usesItsOwnEquipment')"
              class="text-black text-center"
              color="indigo"/>
          </div>
          <clinic-equipment
            ref="clinicEquipment"
            :read-only="!canEdit()"
            :isLoginTemporario="isLoginTemporario"
            :idPrestador="currentItem.pessoa.id"
            @allDeleted="desmarcaEquipamentoHomologado"
            @hasEquipmentEmpty="hasEquipmentVazio"
            style="padding: 0px"
            bodyHeight="calc(100vh - 350px)"/>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.areaAbrangencia.name"
          class="background-pattern font-pattern sou-tab-pane">
          <coverage-area
            ref="coverageArea"
            :isVisualization="isVisualization || !canEdit()"
            :idPessoa="currentItem.pessoa.id"
            :typeUser="perfilUtilizador"
            :apiResource="resources"
            style="padding: 0px"
            bodyHeight="calc(100vh - 350px)"/>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.contrato.name"
          class="background-pattern font-pattern sou-tab-pane">
          <contract
            ref="contract"
            :typeContract="'contractPrestador'"
            :readOnly="isVisualization"
            :typeUser="perfilUtilizador"
            :apiResource="resources"/>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.downloadContract.name"
          class="background-pattern font-pattern sou-tab-pane">
          <download-contract
            v-if="showDownloadContract"
            :isAdministrador="isAdministrador"
            :idPessoa="currentItem.pessoa.id"
            :isLoginTemporario="isLoginTemporario"
            :apiResource="resources"
            :loginTemp="loginTemp"
            :pessoa="currentItem.pessoa"
            :typeUser="perfilUtilizador"
            contratoPetreo="CONTRATO_PETREO_PRESTADOR"
            termoAdesao="TERMO_ADESAO_PRESTADOR"
            @changeStatus="changeStatus"
            :idPerfil="perfilCompany.id_perfil_empresa"
            style="padding: 0px">
          </download-contract>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.documents.name"
          class="background-pattern font-pattern sou-tab-pane">

          <div
            class="text-black">
            <h6>{{ $t('general.loadFiles') }}</h6>
            <span>
              {{ $t('documentsContract.documentsListenBelowNeedsToBeSigned') }}
            </span>

          </div>
          <div>
            <files-manager
              :read-only="!canEdit() && isVisualization"
              ref="filesManager"
              @listFiles="listFiles"
              :showSubMessage="isLoginTemporario"
              :isLoginTemporario="isLoginTemporario"
              :statusLoginTemp="Number(loginTemp.id_status)"
              acceptedFileTypes=".jpeg, .jpg, .pdf"
              :idPessoa="currentItem.pessoa.id"
              bodyHeight="calc(100vh - 450px)"
              :typeUser="perfilUtilizador"
              :idPerfil="perfilCompany.id_perfil_empresa"
              :apiResource="resources"
              style="padding: 0px">
            </files-manager>
            <div
              v-if="showButtonSendToAnalyze"
              class="posicao-msg-final text-black mt-10">
              <q-checkbox
                :disable="!canEdit()"
                v-model="canSendToAnalyze"
                :label="$t('prestador.finalMessageConcludeStep')"
                color="indigo"/>
            </div>
          </div>
        </q-tab-pane>

        <q-tab-pane
          :name="tabs.conclude.name"
          class="background-pattern justify-center font-pattern sou-tab-pane">
          <div
            class="flex justify-center items-center">
            <span class="text-black p-8" style="text-align=center;"> {{ $t('prestador.messageConclude')}} </span>
          </div>
          <div
            class="flex justify-center items-center"
            style="height:58vh;">
            <img
              src="../../assets/img/confirm.png"
              alt="">
          </div>
        </q-tab-pane>
    </q-tabs>

    <q-toolbar
      slot="footer"
      color="grey-4"
      class="flex justify-end">

      <q-btn
        v-if="showButtonSendToApprovalContract"
        id="btn-create-prestador-change-status-admin"
        @click="openSendChangeContractModal"
        color="grey-5"
        class="text-black bottom-left sou-btn-next">
        <span
          class="text-white">
          {{$t('fluxRegisterStatus.sendChangeContract')}}
        </span>
      </q-btn>

      <q-btn
        v-if="showButtonEffectContractAdmin"
        id="btn-create-prestador-effect-contract-admin"
        @click="openEffectContractAdminModal"
        color="grey-5"
        class="text-black bottom-left sou-btn-next">
        <span
          class="text-white">
          {{$t('fluxRegisterStatus.effectContractAdmin')}}
        </span>
      </q-btn>

      <q-btn
        v-if="showButtonNext"
        id="btn-create-prestador-move-to-next-tab"
        @click="moveToNextTab()"
        color="indigo"
        class="sou-btn-next">
        <span
          class="text-white">
          {{$t(buttonNextText)}}
        </span>
      </q-btn>

      <q-btn
        v-if="showButtonSendToAnalyze"
        id="btn-create-prestador-pessoa-move-to-next-tab-change-status-aguardando-analise"
        :disable="!canSendToAnalyze"
        @click="changeStatus(fluxState.aguardando_analise)"
        color="indigo"
        class="text-black bottom-left sou-btn-next">
        <span
          class="text-white">
          {{$t('fluxRegisterStatus.sendToAnalyze')}}
        </span>
      </q-btn>

      <q-btn
        v-if="showButtonApprove"
        id="btn-create-prestador-pessoa-move-to-next-tab-aguardando-liberacao"
        @click="changeStatus(fluxState.aguardando_liberacao)"
        color="indigo"
        class="text-black bottom-left sou-btn-send-documents">
        <span
          class="text-white">
          {{$t('fluxRegisterStatus.sendDocuments')}}
        </span>
      </q-btn>

      <q-btn
        v-if="showButtonSendToApproval"
        id="btn-create-prestador-pessoa-move-to-next-tab-aguardando-aprovacao"
        @click="changeStatus(fluxState.aguardando_aprovacao)"
        color="indigo"
        class="text-black bottom-left sou-btn-next">
        <span class="text-white">
          {{$t('fluxRegisterStatus.sendToApproval')}}
        </span>
      </q-btn>

      <q-btn
        v-if="showButtonEffectContract"
        id="create-prestador-effect-contract-btn"
        @click="effectContract"
        color="indigo"
        class="sou-btn-next">
        <span class="text-white">
          {{$t('fluxRegisterStatus.effectContract')}}
        </span>
      </q-btn>

    </q-toolbar>
   
</template>

This is the script to call:

 data () {
      return {
        canSendToAnalyze: false,
        ind_equipamento_homologado: false,
        resources: this.$api.clinic(this.$resource),
        currentItem: {
          pessoa: {},
          dados_bancario: {},
          responsavel_legal: {},
          responsavel_tecnico: {},
          responsavel_operacao: {},
          dentista_horas: {},
          contrato: {}
        },
        tabs: {
          dados: { index: 1, name: '1-tab', accessVisualizar: true, accessCadastrarEditar: true },
          endereco: { index: 2, name: '2-tab', accessVisualizar: true, accessCadastrarEditar: true },
          banco: { index: 3, name: '3-tab', accessVisualizar: true, accessCadastrarEditar: true },
          responsaveis: { index: 4, name: '4-tab', accessVisualizar: true, accessCadastrarEditar: true },
          grupoAssinantes: { index: 5, name: '5-tab', accessVisualizar: true, accessCadastrarEditar: true },
          dentista: { index: 6, name: '6-tab', accessVisualizar: true, accessCadastrarEditar: true }

Answer 1

in ./quasar.conf add this:

framework: {
    components: [
      ...
      'QTabs',
      'QTab',
      'QRouteTab'
    ]
  }

in .quasar/import-quasar.js

import {...,QTabs,QTab,QRouteTab,... }

Vue.use(Quasar, { ..., components: { QTabs,QTab,QRouteTab }, ... }

Docs : https://quasar.dev/vue-components/tabs#QTabs-API

Answer 2

You have this tab depending on the variable showTabDentistaHoras

<q-tab
    v-if="showTabDentistaHoras"
    slot="title"
    :disable="disableTab(tabs.dentistaHoras.index)"
    @select="changeSelectedTab(tabs.dentistaHoras.name)"
    :name="tabs.dentistaHoras.name"
    :label="$t('prestador.dentist')"
    class="text-white" />  

As far as I can see it's not returned in the data properties. You want to add it like so (or to your computed properties, or get it from vuex.):

data () {
   return {
      //... your other data properties
      showTabDentistaHoras: true //or other value
   }
}