Gestionnaires d'événements en conflit dans vue.js

Question

J'ai une page avec deux boutons. Je souhaite utiliser ces deux boutons pour accéder à différentes pages.

Si je n’inclus qu’un seul des boutons, cela fonctionne bien. Si j'en inclut un seul, cela fonctionne (comme je le montrerai avec les instructions de débogage, le gestionnaire d'événements du premier bouton n'est pas déclenché si le deuxième bouton est présent).

Je suppose que le deuxième bouton est en conflit avec le premier d'une manière ou d'une autre, mais je ne sais pas pourquoi ni comment y remédier.

Voici quelques extraits de code :

Bouton Retour.vue

<template>
    <div>
        <button @click.stop="navigate()"/>
    </div>
</template>
    
<script>
    
    export default {
        name: 'BackButton',
        methods: {
            navigate(){
                console.log("B");
            }
        }
    }
</script>

Bouton complet.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>

Si ready为假（因此完成按钮不可见），则单击后退按钮会打印“ B”。如果 ready 为 true，finishbutton 会打印“F”，但单击backbutton est sur la page, cela ne produira aucun résultat.

Merci beaucoup pour votre aide.

Answer 1

Il y a quelques problèmes mineurs avec votre code, mais le code suivant fonctionne correctement (je ne sais pas exactement d'où cela vient).

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>

---

Ou du moins, je ne peux pas reproduire votre problème en utilisant l'extrait de code fourni.