Conflicting event handlers in vue.js

Question

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.

Answer 1

There are some minor issues with your code, but the following code runs fine (not sure where exactly this is coming from).

Page.vue

<template>
  <div>
    <BackButton></BackButton>
    <FinishButton :visible="ready"></FinishButton>
  </div>
</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>

BackButton.vue

<template>
  <div>
    <button @click.stop="navigate">back</button>
  </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">finish</button>
  </div>
</template>

<script>
export default {
  name: 'FinishButton',
  props: {
    visible: Boolean,
  },
  methods: {
    navigate() {
      console.log('F')
    },
  },
}
</script>

---

Or at least, I can't reproduce your problem using the provided code snippet.