Conflicting event handlers in vue.js
P粉615886660
P粉615886660 2023-09-11 11:59:07
0
1
483

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.

P粉615886660
P粉615886660

reply all(1)
P粉819533564

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.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template