Javascript 带有锚标签的 VueJS @click

VueJS @click with anchor tags

提问by excedion

I have a single page application with a side navigation bar which has a set of anchor tags in a list.

我有一个带有侧导航栏的单页应用程序，它在列表中包含一组锚标记。

I want to show which content to show in the page depending on the value of the selectedPagevariable. As well as change the value of selectedPagebased on the link that is clicked in the side bar.

我想根据selectedPage变量的值显示要在页面中显示的内容。以及selectedPage根据在侧栏中单击的链接更改 的值。

Even when including .prevent on the click event the code below does not change the value of the variable. Is there another condition I should be using instead

即使在单击事件中包含 .prevent 时，下面的代码也不会更改变量的值。是否有另一种情况我应该使用

MyPage.html

我的页面.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

应用程序.js

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

回答by Roy J

This works as I expect; is it working how you expect?

这符合我的预期；它是否按您的预期工作？

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>

回答by agm1984

I just had an interesting scenario where I was making the button work with keyboard only for a11y.

我只是有一个有趣的场景，我让按钮只在键盘上工作a11y。

I did this and it worked great:

我这样做了，效果很好：

Clicking the button loads a popover via vue-popperjs, which needs to be dismissed when the menu item is clicked after. I will show the entire markup and discuss it after:

单击该按钮通过 加载一个弹出窗口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>

There are two key things going on here:

这里有两个关键的事情发生：

1. Place a refon the button

2. Fire $ref.downloadButton.click()when the <a>tag is clicked

1. 将 aref放在按钮上

2. 火$ref.downloadButton.click()的时候<a>被点击标签

This will close the popover when menu items are clicked, netting you some sick UX.

这将在单击菜单项时关闭弹出窗口，为您带来一些糟糕的用户体验。