How to trigger a function on click on any link?

Question

Vue.js

Good afternoon!
There is a component:

<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>

As you can see, each link has it. v-on:click.prevent="sidebarCollapse"
Is there a way to get away from this and hang up the sidebarCollapse method when clicking on any of the links, or on any element with a certain class?

Answer 1

Create links with v-for.
In data you will have an array:

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

And in the template instead of a bunch of elements:

<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>

Something like that. In general - read the documentation , these are the basics.