I have a situation where I'm trying to use two buttons on a page to navigate to different sections. When I include only one button, everything works fine. But when I include both buttons, only one of them functions properly.
Upon debugging, I noticed that the event handler for the first button is not triggered when the second button is present. It seems like there may be a conflict between the two buttons, but I'm unsure of why this is happening and how to resolve it.
Here are some code snippets:
BackButton.vue
<template>
<div>
<button @click.stop="navigate()"/>
</div>
</template>
<script>
export default {
name: 'BackButton',
methods: {
navigate(){
console.log("B");
}
}
}
</script>
Finishbutton.vue
<template>
<div :style="visible ? { 'display': 'inline-flex' } : { 'display': 'none' }">
<button @click.stop="navigate()"/>
</div>
</template>
<script>
export default {
name: 'FinishButton',
props : {
visible: Boolean
},
methods: {
navigate(){
console.log("F");
}
}
}
</script>
Page.vue
<template>
<BackButton/>
<FinishButton :visible=ready></FinishButton>
</template>
<script>
import BackButton from "../components/BackButton.vue"
import FinishButton from "../components/FinishButton.vue"
export default {
name: 'Page',
components: {
BackButton,
FinishButton
},
data() {
return {
ready: true
}
},
}
</script>
If ready is set to false on the page (making the finish-button invisible), clicking the backbutton will print "B". If ready is true, the finishbutton will print "F", but clicking the backbutton does not produce any output.
I would greatly appreciate any assistance. Thank you.