функция onclick всех якорных тегов вызывается при нажатии на один тег в vuejs и pug - PullRequest
Новая
       3

функция onclick всех якорных тегов вызывается при нажатии на один тег в vuejs и pug

0 голосов
/ 01 апреля 2019

у меня есть 4 тега привязки с той же функцией onclick, но когда я щелкаю по одному тегу, функция onclick всех тегов вызывается 

ul.menu-list 
   router-link(tag="li" to="/reports")
     a.has-text-white(:onclick='selectTab("reports")') Report
   router-link(tag="li" to="/adList")
     a.has-text-white(:onclick='selectTab("adSet")') AdSet
   router-link(tag="li" to="/adSetList")
     a.has-text-white(:onclick='selectTab("adSetList")') AdSetList
   router-link(tag="li" to="/sites")
     a.has-text-white(:onclick='selectTab("sites")') Sites

, а функция onclick: 

selectTab(tabName: string) {
    console.log(tabName);
}

Итак, я хочу знать, почему, когда я нажимаю на Report, вызывается вся функция onclick тега?

В этом случае все «report», «adSet», «adSetList», «sites» регистрируются

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

Если вы поместите событие click на router-link и немного измените синтаксис, который должен работать должным образом. Вы должны изменить :onclick на v-on:click или @click и при использовании событие клика на router-link добавляет .native к событию.Вот пример: 

const Home = {
    template: '<div id="home">Reports</div>'
}

const Component1 = {
    template: '<div id="component1">Adset</div>'
};

const Component2 = {
    template: '<div id="component2">Adsetlist</div>'
};
const Component3 = {
    template: '<div id="component3">sites</div>'
};

const routes = [
    { path: '/reports', component: Home },
    { path: '/adList', component: Component1 },
    { path: '/adSetList', component: Component2 },
    { path: '/sites', component: Component3 },
]

const router = new VueRouter({
    routes
});

new Vue({
  el: '#app',
  router,
  data: {
    
  },
  methods: {
    selectTab(tabName) {
       console.log(tabName);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>
<body class="text-center body">
  <div id="app">
     <ul class="menu-list">
       <router-link tag="li" to="/reports" v-on:click.native="selectTab('reports')">
         <a class="has-text-white">Report</a>
       </router-link>
       <router-link tag="li" to="/adList" v-on:click.native="selectTab('adSet')">
         <a class="has-text-white">AdSet</a>
       </router-link>
       <router-link tag="li" to="/adSetList" v-on:click.native="selectTab('adSetList')">
         <a class="has-text-white">AdSetList</a>
       </router-link>
       <router-link tag="li" to="/sites" v-on:click.native="selectTab('sites')">
         <a class="has-text-white">Sites</a>
       </router-link>
    </ul>
    
    <router-view></router-view>
  </div>
</body>
0 голосов
/ 01 апреля 2019

Ваш синтаксис неправильный! Это не синтаксис привязки событий vue. Вам нужно использовать @click="selectTab('reports')" или v-on:click="selectTab('reports')"; Что касается регистратора be это происходит потому, что инициализируется компонент vue ， он автоматически вызывает получатель зависимых данных для получения зависимостей！

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...