web-dev-qa-db-fra.com

VueJS @click avec les balises d'ancrage

J'ai une application d'une seule page avec une barre de navigation latérale qui contient un ensemble de balises d'ancrage dans une liste.

Je souhaite afficher le contenu à afficher dans la page en fonction de la valeur de la variable selectedPage. En plus de changer la valeur de selectedPage en fonction du lien cliqué dans la barre latérale.

Même en incluant .prevent sur l'événement click, le code ci-dessous ne modifie pas la valeur de la variable. Y a-t-il une autre condition que je devrais utiliser à la place

MaPage.html

#Navbar for selecting content
<div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li><a href="#" @click.prevent="selectedPage ='Foo'">Foo</a></li>
        <li><a href="#" @click.prevent="selectedPage ='Bar'">Bar</a></li>
      </ul>
</div>

#Page content
<div id="page-content-wrapper">
 <div class="main-content" id="app" v-cloak>

  <div class="container-fluid" v-if="selectedPage === 'Foo'">
   <h3 class="page-title">{{selectedPage}}</h3>
  </div>

  <div class="container-fluid" v-if="selectedPage === 'Bar'">
   <h3 class="page-title">{{selectedPage}}</h3>
  </div>
 </div>
</div>

App.js

new Vue({
  el: '#app',
  data: {
    selectedPage: 'Foo',
  }
})
javascriptvue.jsvuejs2
6
excedion

Cela fonctionne comme je l'espère. ça marche comme vous vous y attendez?

new Vue({
  el: '#app',
  data: {
    selectedPage: 'Foo'
  }
});
#app {
  display: flex;
}

#sidebar-wrapper {
  border-right: solid thin black;
  margin-right: 15px;
  padding-right: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li><a href="#" @click.prevent="selectedPage ='Foo'">Foo</a></li>
      <li><a href="#" @click.prevent="selectedPage ='Bar'">Bar</a></li>
    </ul>
  </div>

  #Page content
  <div id="page-content-wrapper">
    <div class="main-content" id="app" v-cloak>

      <div class="container-fluid" v-if="selectedPage === 'Foo'">
        <h3 class="page-title">{{selectedPage}}</h3>
        Foo section
      </div>

      <div class="container-fluid" v-if="selectedPage === 'Bar'">
        <h3 class="page-title">{{selectedPage}}</h3>
        Bar section
      </div>
    </div>
  </div>
</div>

6
Roy J

J'ai juste eu un scénario intéressant où je faisais fonctionner le bouton avec le clavier uniquement pour a11y .

J'ai fait ça et ça a très bien marché:

En cliquant sur le bouton, un popover apparaît via vue-popperjs, qui doit être ignoré après le clic sur l'élément de menu. Je vais montrer le balisage entier et en discuter après:

<template>
    <v-popper trigger="click" :options="{ placement: 'bottom' }" enter-active-class="shadow-lg">
        <div class="popper">
            <div class="flex flex-col text-left p-2">
                <span class="text-pink font-bold py-2 px-8">Download</span>
                <a
                    :href="defaultAction"
                    class="no-underline text-grey-darkest hover:bg-pink-lighter py-2 px-8"
                    @click="$refs.downloadButton.click()"
                >
                    CSV
                </a>
                <a
                    :href="urlsAction"
                    class="no-underline text-grey-darkest hover:bg-pink-lighter py-2 px-8"
                    @click="$refs.downloadButton.click()"
                >
                    CSV with URLs
                </a>
            </div>
        </div>

        <button
            ref="downloadButton"
            slot="reference"
            class="flex items-center justify-center text-center no-underline rounded-full w-8 h-8 text-grey-darker hover:text-pink active:text-pink-darker mr-2"
            title="Download CSV"
        >
            <i class="fas fa-download"></i>
        </button>
    </v-popper>
</template>

Il y a deux choses clés qui se passent ici:

  1. Placez une ref sur le bouton

  2. Feu $ref.downloadButton.click() lorsque l'utilisateur clique sur la balise <a>

Ceci fermera la fenêtre lorsque les éléments du menu sont cliqués, vous donnant une UX malade.

0
agm1984