Widersprüchliche Event-Handler in vue.js

Question

Ich habe eine Seite mit zwei Schaltflächen. Ich möchte diese beiden Schaltflächen verwenden, um zu verschiedenen Seiten zu navigieren.

Wenn ich nur einen der Knöpfe einbinde, funktioniert es gut. Wenn ich nur eine einfüge, funktioniert es (wie ich mit Debug-Anweisungen zeigen werde, wird der Ereignishandler der ersten Schaltfläche nicht ausgelöst, wenn die zweite Schaltfläche vorhanden ist).

Ich vermute, dass die zweite Schaltfläche in irgendeiner Weise mit der ersten in Konflikt steht, aber ich weiß nicht, warum und wie ich das beheben kann.

Dies sind einige Codeausschnitte:

Zurück-Taste.vue

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

Button.vue abschließen

<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>

Wenn ready为假（因此完成按钮不可见），则单击后退按钮会打印“ B”。如果 ready 为 true，finishbutton 会打印“F”，但单击backbutton auf der Seite ist, wird keine Ausgabe erzeugt.

Vielen Dank für Ihre Hilfe.

Answer 1

您的代码存在一些小问题，但以下代码运行良好（不确定这到底来自哪里）。

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>

---

或者至少，我无法使用提供的代码片段重现您的问题。