I have a page with two buttons. I want to use these two buttons to navigate to different pages.
If I only include one of the buttons it works fine. If I include just one it works (as I will show with debug statements, the first button's event handler is not fired if the second button is present).
My guess is that the second button is conflicting with the first in some way, but I don't know why and how to fix it.
These are some code snippets:
Back button.vue
<template> <div> <button @click.stop="navigate()"/> </div> </template> <script> export default { name: 'BackButton', methods: { navigate(){ console.log("B"); } } } </script>
Complete button.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 false on the page (so the Finish button
is not visible), clicking the Back button
will print "B". If ready
is true, the finishbutton
will print "F", but clicking the backbutton
will produce no output.
Thank you for your help.
There are some minor issues with your code, but the following code runs fine (not sure where exactly this is coming from).
Page.vue
BackButton.vue
FinishButton.vue
Or at least, I can't reproduce your problem using the provided code snippet.