Когда я нажимаю на вкладки навигации, он не будет активным. Почему ? Он будет активен, когда я нажму два раза. Но одним щелчком мыши он будет направлен на соответствующую страницу

Question

<template>
    <div>
        <div class="os-tabs-w">
            <div class="os-tabs-controls os-tabs-complex">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link el-icon-s-home" :class="dashboardTheme" @click="created('dash')"
                            href="#/helpdesk" data-toggle="tab"><span class="tab-label">DashBoard</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link el-icon-s-ticket" :class="ticketTheme" href="#/helpdesk/tickets"
                            @click="created('ticket')" data-toggle="tab"><span class="tab-label">Tickets</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link el-icon-circle-close nav-actions" :class="completeTheme"
                            href="#/helpdesk/completed_tickets" @click="created('complete')" data-toggle="tab"><span
                                class="tab-label">Completed Tickets</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link el-icon-s-help" :class="tatTheme" href="#/helpdesk/tat_tickets"
                            @click="created('tat')" data-toggle="tab"><span class="tab-label">TAT Tickets</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link el-icon-s-custom" :class="configTheme" href="#/helpdesk/tickets_config"
                            @click="created('config')" data-toggle="tab"><span class="tab-label">Ticket
                                Config</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link el-icon-coin" :class="slaTheme" href="#/helpdesk/tickets_sla"
                            @click="created('sla')" data-toggle="tab"><span class="tab-label">Ticket SLA</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link el-icon-coin" :class="ruleTheme" href="#/helpdesk/tickets_rules"
                            @click="created('rule')" data-toggle="tab"><span class="tab-label">Ticket Rules</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

Это моя html кодировка. Я использую класс Dynami c, чтобы активировать вкладки навигации. Если какой-либо метод лучше, чем этот, пожалуйста, предложите мне. Мне бы очень помогло

    <script>
        export default {
          mounted(){
            this.created("dash");
          },
          data() {
            return {
              dashboardTheme: "",
              ticketTheme:"",
              completeTheme:"",
              tatTheme:"",
              configTheme:"",
              slaTheme:"",
              ruleTheme:"",
            };
          },
          methods: {
            created(ticvalue) {
              if (ticvalue == "dash") {
                this.dashboardTheme = "active",
                this.ticketTheme = "",
                this.completeTheme='',
                this.tatTheme='',
                this.configTheme='',
                this.slaTheme='',
                this.ruleTheme=''
              } else if (ticvalue == "ticket") {
                this.dashboardTheme = "",
                this.ticketTheme = "active",
                this.completeTheme='',
                this.tatTheme='',
                this.configTheme='',
                this.slaTheme='',
                this.ruleTheme=''
              } else if (ticvalue == "complete") {
                console.log("complr")
                this.dashboardTheme = "",
                this.ticketTheme = ""
                this.completeTheme="active";
                this.tatTheme='',
                this.configTheme='',
                this.slaTheme='',
                this.ruleTheme=''
              } else if (ticvalue == "tat") {
                this.dashboardTheme = '',
                this.ticketTheme = '',
                this.completeTheme='',
                this.tatTheme='active',
                this.configTheme='',
                this.slaTheme='',
                this.ruleTheme=''
              } else if (ticvalue == "config") {
                this.dashboardTheme = '',
                this.ticketTheme = '',
                this.completeTheme='',
                this.tatTheme='',
                this.configTheme='active',
                this.slaTheme='',
                this.ruleTheme=''
              } else if (ticvalue == "sla") {
                this.dashboardTheme = '',
                this.ticketTheme = '',
                this.completeTheme='',
                this.tatTheme='',
                this.configTheme='',
                this.slaTheme='active',
                this.ruleTheme=''
              } else if (ticvalue == "rule") {
                this.dashboardTheme = '',
                this.ticketTheme = ''
                this.completeTheme='',
                this.tatTheme='',
                this.configTheme='',
                this.slaTheme='',
                this.ruleTheme='active'
              }
            }
          }
        };
     </script>

это мой сценарий. Здесь я использую active, чтобы выделить вкладку. Я испробовал так много возможностей, но я не получу ответ за это. Кто-нибудь, помогите мне избавиться от этой проблемы.

Answer 1

Вы можете использовать Vue модификатор событий .prevent в своих @click вызовах:

Измените свои @click="..." вызовы на @click.prevent="..." в своем коде.

Это будет предотвращать поведение по умолчанию (перейти по ссылке) события click.

https://vuejs.org/v2/guide/events.html#Event -Модификаторы