앵커 태그가 있는 VueJ @click

앵커 태그가 있는 VueJ @click

목록에 앵커 태그 세트가 있는 사이드 네비게이션 바가 있는 단일 페이지 응용 프로그램이 있습니다.

이 페이지의 값에 따라 표시할 콘텐츠를 표시하려고 합니다.selectedPage변수.가치의 변경과 더불어selectedPage사이드바에서 클릭된 링크를 기반으로 합니다.

클릭 이벤트에 .provent를 포함하더라도 아래 코드는 변수 값을 변경하지 않습니다.대신 사용해야 할 다른 조건이 있습니까?

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

예상대로 작동하는데, 예상대로 작동하나요?

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>

11년 동안만 키보드로 버튼을 작동시키는 재미있는 시나리오가 있었습니다.

이렇게 했더니 잘 되더라고요.

버튼을 클릭하면 팝오버가 로드됩니다.vue-popperjs(이후 메뉴 항목을 클릭했을 때 해제해야 합니다).마크업 전체를 보여주고 다음에 논의하겠습니다.

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

여기에서는, 다음의 2개의 중요한 것이 진행되고 있습니다.

1. 를 배치하다ref딱 맞아서

2. 불$ref.downloadButton.click()그 때<a>태그 클릭

메뉴 항목을 클릭하면 팝오버가 닫히고 아픈 UX가 나타납니다.

언급URL : https://stackoverflow.com/questions/45147387/vuejs-click-with-anchor-tags