Vue 以编程方式添加事件修饰符不起作用

如何解决Vue 以编程方式添加事件修饰符不起作用

我正在尝试使用 v-on 以编程方式添加事件，方法是将键作为事件名称和值作为处理程序的对象传递。

此方法似乎不允许或识别诸如

之类的事件修饰符

v-on=“{‘keydown.enter.prevent’: handler}”

上面的keydown事件不会触发，除非修改器被移除

v-on=“{keydown: handler}”

有没有办法让这个工作？

解决方法

请想想你这样做会失去的所有东西。我从来没有遇到过这种需求，我觉得你应该跳过箍来避免它。

在正常情况下，您的模板是与输出非常相似的愚蠢稳定的东西，具有用于动态数据（通过反应性提供）和一些最终将更新您的模型的事件处理程序的漏洞。它会告诉您它将调用的所有内容。

如果您在某处有一些动态附加事件处理程序或修改其行为的代码，您就不再有这种确定性。您附加您的处理程序以响应什么？您的应用程序现在有 modes，这很糟糕。我更愿意在模板、事件处理程序中声明静态的、永久附加的，然后通过在处理程序中放置条件来处理您的要求。

,

这是如何使用动态参数将处理程序绑定到动态事件名称：

const app = new Vue({
  el: '#app',data() {
    return {
      event: 'keydown',}
  },methods: {
    handler() {
      console.log('Called')
    }
  },})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.1/vue.js"></script>
<div id="app">
  <div>Dynamic event with modifiers</div>
  <button @[event].enter.prevent="handler">Listening to: {{ event }}</button>
</div>

请注意：
此语法仅在 2.6.0+ 版本中受支持。请参阅文档 here。