Javascript 调用vuejs方法的jQuery全局按键事件方法不'；我不能按预期工作。为什么？

我有一个网页，可以显示几个html风格的对话框。我希望在一个地方有代码，可以感觉到按下了enter键，并调用与单击对话框的OK按钮调用相同的方法。这允许访问者在对话框中按enter键关闭它，而不必单击OK按钮。非常简单的东西

我想使用jQuery创建一个全局keydown处理程序，它查找enter键并调用vuejs dlogClose方法。我在下面创建了这个的一个最小版本。在现实生活中，将有多个对话框和更复杂的代码来为特定对话框找到合适的dlogClose方法。但我已经删除了该逻辑，创建了一个Vue未按预期运行的最小代码示例

单击按钮打开对话框。然后单击ok按钮。它将显示一个警报，提示“dlogClose called”，然后关闭对话框。工作完全符合预期

然后单击按钮再次打开对话框。这次按回车键。jQuery全局事件处理程序将看到enter键并调用相同的dlogClose方法。该方法将显示一个警报，如预期的那样显示“dlogClose called”，但它不会关闭对话框！什么？那是完全出乎意料的行为

你能解释一下为什么这种行为是有效的吗？或者这是某种vue库错误

var-app=新的Vue({
el:“#应用程序”，
数据：{
dlogVisible:false
},
方法：{
dlogClose:函数（）{
警报（“称为dlogClose”）；
app.dlogVisible=false；
}
},
已创建：函数（）{
$（文档）。按键（功能（e）{
如果（e.which==13）{
app.dlogClose（）；
}
});
}
});
.dlog{
高度：200px；宽度：200px；边框：实心1px灰色；
填充：20px；框阴影：0px 3px 15px灰色；
位置：绝对；顶部：40px；左侧：40px；背景色：白色
}

全局输入键示例


按enter键调用与单击OK按钮相同的方法



好啊
打开对话框
您可以在最顶端的页面组件（应用程序组件）中的created（）方法中创建jQuery事件侦听器。在该顶级应用程序组件中，创建一个方法，每当按下enter按钮时，只要它满足您指定的条件，就会触发该方法。为简单起见，然后可以增加vuex状态计数器或其他内容。您拥有的任何子组件都可以监视计数器的变化并做出相应的反应（同样基于您设置的条件）。我对调度不是很了解，但这可能是另一个需要研究的途径。
这里的问题是，在对话框打开时按enter键也会触发打开对话框按钮。因此，本质上，对话框是关闭的，并且会立即重新打开。使用preventDefault来阻止这种情况发生

$(document).keypress(function (e) {
  e.preventDefault()
  if (e.which == 13) {         
    app.dlogClose();
  }
});

下面是更新的代码


var-app=新的Vue({
el:“#应用程序”，
数据：{
dlogVisible:false
},
方法：{
dlogClose:函数（）{
警报（“称为dlogClose”）；
app.dlogVisible=false；
}
},
已创建：函数（）{
$（文档）。按键（功能（e）{
e、 预防默认值（）
如果（e.which==13）{
app.dlogClose（）；
}
});
}
});
.dlog{
高度：200px；宽度：200px；边框：实心1px灰色；
填充：20px；框阴影：0px 3px 15px灰色；
位置：绝对；顶部：40px；左侧：40px；背景色：白色
}

全局输入键示例


按enter键调用与单击OK按钮相同的方法



好啊
打开对话框
你的答案没有回答我的问题。请参阅我提供的代码。我正在vue Created（）方法中创建一个jquery事件侦听器来侦听enter键。并调用警报所示的适当方法。但不知何故，它不会在警报后执行该方法中的代码行（即关闭对话框的代码行）。怎么回事？这是怎么回事？所以您想将同一组件的数据对象dlogVisible指定为false？如果是这样，那不是这样吗。dlogVisible=false；或app.dlogVisible=false；在这种情况下也是一样。如果由全局jquery事件处理程序调用，这两个函数似乎都不会在dlogClose（）中执行。我简化了它，这样就不需要任何组件了。这是一个非常简单的例子，但它的行为并不像预期的那样。当jquery事件处理程序调用app.dlogVisible时，app.dlogVisible怎么能不设置为false呢？我误读了你的部分文章。也许这会有用。。。创建：function（）{var self=this；$（document）.keypress（function（e）{if（e.which==13）{self.dlogClose（）；}}}）；}这是一种非常有效的方法。但不幸的是，它也不起作用。更疯狂的是，如果我使用这种方法试图直接在事件处理程序中设置dlogVisible=false，它仍然不起作用。i、 e.var self=此$（文档）.keypress（函数（e）{if（e.which==13）{self.dlogVisible=false；}}）//这怎么可能不起作用？这很有道理。哇！