Javascript Vuejs-希望从html调用具有数据属性的函数

我希望在点击按钮获取数据属性值时调用一个函数，因为我熟悉jquery，我希望它能够工作

<button id="openmodal" data-user="1" data-purpose="contact form" class="btn__primary" aria-label="Help"></button>
<button id="openmodal" data-user="1" data-purpose="Opt In" class="btn__primary" aria-label="Help"></button>

---

我需要获取用户id并调用函数，在jquery中，我通常会在数据属性中传递值并获取它们，然后调用所需函数。我知道我不应该使用数据属性，所以我正在寻找最好的方法，可以有多个按钮，以不同的数据目的执行不同的js功能（属性）因此，我需要将数据目的和数据用户传递给vue组件/功能

使用

@click

绑定将单击事件绑定到按钮非常简单

为了在单击处理程序期间获取

数据用户

属性，可以使用：

事件.target.attributes[“数据用户”].value

• event.target

  提供您单击的按钮

• .attributes[“数据用户”].value

  选择属性

  数据用户

  并返回其值。类似地，您可以获得属性

  数据目的

  如

  .attributes[“data-purpose]”。值

  是您仍然需要的

var-app=新的Vue({
el:“应用程序”，
方法：{
联系方式：功能（事件）{
警报（“已单击联系人表单。用户：“+event.target.attributes[“数据用户”].value”）；
},
选项：功能（事件）{
警报（“选择加入。用户：+event.target.attributes[“数据用户”].value”）；
}
}
});

联系方式
选择加入
感谢您的回复。我可以进一步询问如何在另一个var contactModal=new Vue中调用var函数contactForm（{methods:{triggerModal:function（）{//need to call contactForm method here}}}}您可以在
contactModal
Vue中声明methods对象。从那里，您可以使用
this.contactForm（））
调用该方法。不幸的是，我需要从模式以及模式外部调用此函数。例如，单击按钮时，我显示一个模式，但在此之前，我需要调用一个函数，以检查是否允许用户显示该模式。现在，需要为按钮调用相同的函数，该按钮用于选择加入任何用户都可以使用。因此，我希望创建一个函数，可以从外部处理这两个需求，您可以根据方法声明的位置调用它，如
app.contactForm（）
或
contactModal.contactForm（）
。发布了一个更详细的问题，介意检查一下吗？