webentwicklung-frage-antwort-db.com.de

VueJS @click mit Ankertags

Ich habe eine Anwendung für eine einzelne Seite mit einer seitlichen Navigationsleiste, die eine Reihe von Ankertags in einer Liste enthält.

Ich möchte anzeigen, welcher Inhalt auf der Seite angezeigt werden soll, abhängig vom Wert der Variablen selectedPage. Ändern Sie auch den Wert von selectedPage basierend auf dem Link, auf den in der Seitenleiste geklickt wird.

Auch wenn .prevent in das click -Ereignis eingeschlossen wird, ändert der nachstehende Code den Wert der Variablen nicht. Gibt es eine andere Bedingung, die ich stattdessen verwenden sollte?

MyPage.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',
  }
})
6
excedion

Das funktioniert wie erwartet. Funktioniert es wie erwartet?

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

Ich hatte gerade ein interessantes Szenario, in dem ich die Tasten nur für a11y mit der Tastatur funktionierte.

Ich habe das gemacht und es hat super funktioniert:

Wenn Sie auf die Schaltfläche klicken, wird ein Popover über vue-popperjs geladen, der nach dem Anklicken des Menüelements deaktiviert werden muss. Ich werde das gesamte Markup zeigen und danach besprechen:

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

Hier gibt es zwei wichtige Dinge:

  1. Platzieren Sie eine ref auf der Schaltfläche

  2. Lösche $ref.downloadButton.click(), wenn auf das <a>-Tag geklickt wird

Dadurch wird das Popover geschlossen, wenn auf Menüelemente geklickt wird.

0
agm1984