我有一個包含兩個按鈕的頁面。我想使用這兩個按鈕導航到不同的頁面。
如果我只包含其中一個按鈕,它就可以正常工作。如果我只包含一個作品(正如我將用偵錯語句顯示的那樣,如果第二個按鈕存在,則不會觸發第一個按鈕的事件處理程序)。
我的猜測是,第二個按鈕與第一個按鈕在某種程度上發生衝突,但我不知道為什麼以及如何修復它。
這些是一些程式碼片段:
後退按鈕.vue
<template> <div> <button @click.stop="navigate()"/> </div> </template> <script> export default { name: 'BackButton', methods: { navigate(){ console.log("B"); } } } </script>
完成按鈕.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>
如果頁面上的ready
為假(因此完成按鈕
不可見),則按一下後退按鈕
會列印「 B」。如果 ready
為 true,finishbutton
會列印“F”,但按一下backbutton
不會產生任何輸出。
非常感謝您的幫忙。
您的程式碼存在一些小問題,但以下程式碼運作良好(不確定這到底來自哪裡)。
#Page.vue
BackButton.vue
FinishButton.vue
或至少,我無法使用提供的程式碼片段重現您的問題。