Vue 组件中的关键事件不会触发
Posted
技术标签:
【中文标题】Vue 组件中的关键事件不会触发【英文标题】：Key event doesn't fire in Vue component 【发布时间】：2020-05-17 07:29:12 【问题描述】：我正在尝试制作一个事件监听器，如果用户按下了我选择的键盘键，它会显示一条警报消息。
我的项目是一个使用 CDN 链接的基本 Vue 实例。我想到目前为止，我的代码可以单独在 javascript 中运行，而无需在 html 中声明任何内容，但我可能错了。
如果尝试在此站点上合并一些答案，但到目前为止，我仍然无法提出可行的解决方案。我想我的问题是；谁能告诉我为什么下面的 sn-p 不起作用？
created()
window.addEventListener('keyup', (e) =>
if (e.key == 'Escape')
alert("Hello")
)
这是一个sn-p：
new Vue (
el: '#app',
data:
name: ''
,
methods:
/* created()
document.keyup = function(event)
switch (event.keyCode)
case 13:
this.crash()
break;
case 65:
this.kick()
break;
,*/
mounted()
window.addEventListener('keyup', (e) =>
if (e.key == 'Escape')
alert("HEJ")
)
,
destroy()
window.removeEventListener('keyup', (e) =>
if (e.key == 'Escape')
alert("HEJ")
)
,
)<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<title>Drum Kit</title>
</head>
<body>
<div class="container" id="app">
<div class="intro">
<img class="logo" src="\Drum Kit Starting Files\images\logo.png" >
<p class="start">Press the keys from 1-7 and get groovin'!</p>
<p>But first, let me get your name:</p>
<input class="input" v-model="name"> <!-- Two way data binding (v-model) -->
<input>
<div class="message">
<p v-if="name">This is </p>
<p class="name"> name </p>
<p v-if="name">'s personal drum kit!</p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>【问题讨论】：
这在沙盒环境中运行良好。根据您添加组件的方式，您可能希望在mounted() 挂钩中执行此操作（不要忘记删除 destroy() 中的侦听器）。你能提供一个更完整的例子吗？
嗨，谢谢你的回复，我刚刚用 sn-p 更新了我的答案！
methods 块内有钩子...
【参考方案1】：
从methods 对象中移动mounted 和destroy 钩子，它将起作用...
new Vue(
el: '#app',
data:
name: ''
,
mounted()
window.addEventListener('keyup', (e) =>
if (e.key == 'Escape')
alert("HEJ")
)
,
destroy()
window.removeEventListener('keyup', (e) =>
if (e.key == 'Escape')
alert("HEJ")
)
,
)<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<title>Drum Kit</title>
</head>
<body>
<div class="container" id="app">
<div class="intro">
<img class="logo" src="\Drum Kit Starting Files\images\logo.png" >
<p class="start">Press the keys from 1-7 and get groovin'!</p>
<p>But first, let me get your name:</p>
<input class="input" v-model="name">
<!-- Two way data binding (v-model) -->
<input>
<div class="message">
<p v-if="name">This is </p>
<p class="name"> name </p>
<p v-if="name">'s personal drum kit!</p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>【讨论】：
以上是关于Vue 组件中的关键事件不会触发的主要内容，如果未能解决你的问题，请参考以下文章
vue -vantUI tab切换时 list组件不触发load事件解决办法