Pengendali acara bercanggah dalam vue.js

Question

Saya mempunyai halaman dengan dua butang. Saya mahu menggunakan dua butang ini untuk menavigasi ke halaman yang berbeza.

Jika saya hanya memasukkan salah satu butang, ia berfungsi dengan baik. Jika saya memasukkan hanya satu ia berfungsi (seperti yang saya akan tunjukkan dengan penyataan nyahpepijat, pengendali acara butang pertama tidak dinyalakan jika butang kedua hadir).

Tekaan saya ialah butang kedua bercanggah dengan yang pertama dalam beberapa cara, tetapi saya tidak tahu mengapa dan bagaimana untuk membetulkannya.

Ini adalah beberapa coretan kod:

Butang belakang.vue

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

Butang lengkap.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>

Jika ready为假（因此完成按钮不可见），则单击后退按钮会打印“ B”。如果 ready 为 true，finishbutton 会打印“F”，但单击backbutton berada pada halaman ia tidak akan menghasilkan sebarang output.

Terima kasih banyak atas bantuan anda.

Answer 1

Terdapat beberapa isu kecil dengan kod anda, tetapi kod berikut berfungsi dengan baik (tidak pasti dari mana asalnya).

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>

---

Atau sekurang-kurangnya, saya tidak dapat menghasilkan semula masalah anda menggunakan coretan kod yang disediakan.