Как запустить функцию по клику по любой ссылке?

Question

[Глеб Николаев]

Добрый день!
Есть компонент:

<template>
  <div id="app">
    <div class="wrapper">
      <!-- Sidebar  -->
      <nav id="sidebar">
        <ul class="list-unstyled components">
          <b-nav-item :to="{name: 'AdmissionActList'}" v-on:click.prevent="sidebarCollapse">link</b-nav-item>
          <b-nav-item  :to="{name: 'ShiftsTask'}" v-on:click.prevent="sidebarCollapse">link</b-nav-item>
          <b-nav-item  :to="{name: 'MaterialTransferActList'}" v-on:click.prevent="sidebarCollapse">link</b-nav-item>
          <b-nav-item v-on:click.prevent="sidebarCollapse">Выпуск</b-nav-item>
          <b-nav-item :to="{name: 'StorageReportIndex'}" v-on:click.prevent="sidebarCollapse">link</b-nav-item>
          <b-nav-item :to="{name: 'ProductionPlanList'}" v-on:click.prevent="sidebarCollapse">link</b-nav-item>
          <b-nav-item :to="{name: 'BarcodeCreate'}" v-on:click.prevent="sidebarCollapse">link</b-nav-item>
        </ul>
      </nav>
   </div>
</div>
<template>
<script>
  export default {
    name: 'App',
    data() {
      return {
        isActive: false,
        dropDown:false
      }
    },
    methods: {
      sidebarCollapse: function() {
        this.isActive = !this.isActive;
      },
      dropdownCollapse: function() {
        this.dropDown = !this.dropDown;
      }
    },
  }
</script>

Как видите на каждой ссылке есть v-on:click.prevent="sidebarCollapse"
Есть ли способ уйти от этого и повесить метод sidebarCollapse при клике на любую из ссылок, либо по любому элементу с определенным классом?

Answer 1

[0xD34F]

Создавайте ссылки с помощью v-for.

В data у вас будет массив:

links: [
  { title: 'link #1', to: { name: 'AdmissionActList' } },
  { title: 'link #2', to: { name: 'ShiftsTask' } },
  // ну и так далее
],

А в шаблоне вместо кучи элементов:

<ul class="list-unstyled components">
  <b-nav-item
    v-for="link in links"
    :to="link.to"
    @click.prevent="sidebarCollapse"
  >{{ link.title }}</b-nav-item>
</ul>

Вот как-то так. А вообще - читайте документацию, это основы.

Comments

[Глеб Николаев]

Не могли бы ли вы дать пример кода для примера выше?

[0xD34F]

Глеб Николаев, дополнил ответ.