Javascript VueJS阻止自定义事件的默认操作

我有一个

组件，它由以下模板组成：

<button @click="$emit('trigger')">
</button>

我在表单中使用的组件如下所示：

<btn>Submit</btn>

<btn>Submit</btn> <!-- This button should submit the form -->
<btn @trigger="nextQuiz">Next</btn> <!-- This button should only execute the nextQuiz method -->

提交

现在有些情况下，我需要在表单中有两个按钮。其中一人提交表格，另一人不提交。但是因为他们都在我的表单中，所以他们都提交了表单。我不能这样做：

<btn>Submit</btn>

<btn>Submit</btn> <!-- This button should submit the form -->
<btn @trigger="nextQuiz">Next</btn> <!-- This button should only execute the nextQuiz method -->

提交
下一个

如何告诉vue仅在单击第二个

时才阻止表单提交？

设置

Vue.component（“btn”{
道具：{
提交：布尔值
},
计算：{
type（）{返回this.submit？'submit'：'button'}
},
模板：`
`
})

用法如下：

<form action="">
  <btn submit>Submit</btn>
  <btn>Don't Submit</btn>
</form>

提交
不要屈服

这里有一个例子

console.clear（）
Vue.组件（“btn”{
道具：{
提交：布尔值
},
计算：{
type（）{返回this.submit？'submit'：'button'}
},
模板：`
`
})
新Vue({
el:“应用程序”
})

提交
不要屈服

您可以通过

@click.native.prevent指定inline以防止本机单击事件的默认行为：


Vue.component（'btn'{
模板：`
`
})
新Vue({
el:“#应用程序”，
方法：{
nextQuiz（）{
console.log（'nextQuiz'）
}
}
})

提交
下一个