我有这个Vue JS代码。单击帐户<a>
标记可使toggle
方法运行。 toggle方法将事件侦听器添加到文档中,但是,一旦触发运行,事件侦听器便会触发并运行close
,即使事件侦听器是由于事件而添加的,因此事件必须已经发生。为什么运行此事件以及如何在切换运行后立即使其不运行。仅应在第一次点击<a>
标记后才能进行任何点击。
<template>
<div>
<a v-on:click="this.toggle">Account</a>
<nav v-if="this.open">
<a>Profile</a>
<a>Settings</a>
<a>Sign Out</a>
<a>Admin</a>
</nav>
</div>
</template>
<script lang='ts'>
import { Vue } from 'vue-property-decorator'
export default Vue.extend({
data: function () {
return {
open: false
}
},
methods: {
toggle: function () {
this.open = !this.open
if (this.open) {
// Add click listener to whole page to close dropdown
document.addEventListener('click', this.close)
}
},
close: function () {
console.log('test')
this.open = false;
document.removeEventListener('click', this.close)
}
}
})
</script>
答案 0 :(得分:1)
正如Chris G在评论中指出的那样,这是在添加了侦听器之后事件突然出现在文档中的事件。幸运的是,Vue使这变得容易。您可以将活动更改为v-on:click.stop="this.toggle"