VueJS @Klick mit Anker-tags

Ich habe eine single-page-Anwendung mit einer Seite die navigation bar, die eine Reihe von Anker-tags in einer Liste.

Möchte ich zeigen, welche Inhalte zu zeigen, in der Seite je nach dem Wert der selectedPage variable. Sowie ändern Sie den Wert von selectedPage basieren auf den link geklickt in der side bar.

Selbst wenn darunter .verhindern, dass auf das click-Ereignis den folgenden code ändert nicht den Wert der Variablen. Gibt es einen anderen Zustand, den ich nutzen sollte, anstatt

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',
  }
})

InformationsquelleAutor excedion | 2017-07-17

  1. 0

    Ich hatte gerade ein Interessantes Szenario, in dem ich den button-arbeiten mit Tastatur nur für a11y.

    Ich habe das gemacht und es hat Super geklappt:

    Klick auf die Schaltfläche lädt ein popover, über vue-popperjs muss entlassen werden, wenn der Menüpunkt angeklickt wird, nach. Ich zeige die gesamte markup und besprechen Sie es nach:

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

    Gibt es zwei wichtige Dinge, die hier Los:

    1. Ort ein ref auf die Schaltfläche

    2. Feuer $ref.downloadButton.click() wenn die <a> tag angeklickt wird,

    Diese wird, schließen Sie das popover wenn Menüpunkte angeklickt werden, netting Sie einige krank UX.

    InformationsquelleAutor agm1984

Schreibe einen Kommentar