vue.js 中的冲突事件处理程序答案

【问题标题】：Conflicting event handlers in vue.jsvue.js 中的冲突事件处理程序
【发布时间】：2022-12-31 19:58:23
【问题描述】：

我有一个包含两个按钮的页面。我想使用这两个按钮导航到不同的页面。

如果我只包括其中一个按钮，它就可以正常工作。如果我只包含一个作品（如果第二个按钮在那里，我将用调试语句显示，第一个按钮的事件处理程序不会被触发）。

我的猜测是，第二个按钮与第一个按钮有某种冲突，但我不知道为什么以及如何解决它。

这些是一些代码 sn-ps：

后退按钮.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>

页面.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 为假（因此 finish-button 不可见），则单击 backbutton 会打印“B”。如果ready 为真，则finishbutton 打印“F”，但单击backbutton 不会产生任何输出。

非常感谢帮助。

【问题讨论】：

也许检查你的 Vue 开发工具、ESlint 或任何控制台错误，这可能表明除了我的回答之外还有一些错误。到目前为止，在 Nuxt2 (Vue2) 中完美运行。可能在 Vue3 中也是如此。

标签： javascript vue.js button event-handling

【解决方案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>

或者至少，我无法使用提供的 sn-p 重现您的问题。

【讨论】：