One of the challenges I'm facing is with a custom <btn>
component that has a specific template structure:
<button @click="$emit('trigger')">
</button>
This component is typically used in forms like so:
<btn>Submit</btn>
However, there are scenarios where I need to include two buttons within the same form. One button should submit the form, while the other should not. The issue arises because both buttons are located inside the form tag, causing them both to trigger form submission. So how can I achieve the desired behavior with Vue?
<btn>Submit</btn> <!-- This button should submit the form -->
<btn @trigger="nextQuiz">Next</btn> <!-- This button should only execute the nextQuiz method -->
Is there a way in Vue to prevent form submission when specifically clicking on the second <btn>
element?