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

【问题标题】：Vue programmatically adding event modifiers not workingVue以编程方式添加事件修饰符不起作用
【发布时间】：2021-09-15 12:18:59
【问题描述】：

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

此方法似乎不允许或识别事件修饰符，如

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

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

v-on=“{keydown: handler}”

有没有办法让它工作？

【问题讨论】：

标签： javascript html vue.js events event-handling

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

这是您可以使用动态参数将处理程序绑定到动态事件名称的方式：

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。

【讨论】：