vue js组件挂载时如何给按钮绑定点击事件？

Question

我正在使用第三方应用程序 (vue slick carousel)，我需要将点击事件绑定到下面的按钮

<button type="button" data-role="none" class="slick-arrow slick-next" style="display: block;">
    <svg...</svg>
</button>

所以每次我点击这个按钮都会触发一个函数。这是我在 mounted 和 created 生命周期中尝试过的，但没有绑定点击事件。

// console.log(document.querySelector(".slick-next")); // this returns element stated above

document.querySelector(".slick-next").addEventListener("click", () => {
  console.log("Works");
});

我试过 setAttribute 希望它有用，但也没用。

感谢任何帮助。提前谢谢你。

Answer 1

必须使用vuejs的events handling。 Vuejs 有很多针对多种情况的事件。

例如，在您的情况下，您可以使用事件 v-bind:click 或简单地使用 @click。在 vue slick 的文档中，显示此示例，本质上是相同的。

我附上一段代码：

<template>
  <VueSlickCarousel ref="carousel">
    <div><h3>1</h3></div>
    /*...*/
  </VueSlickCarousel>
  <button @click="showNext">show me the next</button>
</template>
<script>
  export default {
    methods: {
      showNext() {
        this.$refs.carousel.next()
      },
    },
  }
</script>

Answer 2

我怀疑他们当时可能在组件内部的按钮点击上使用了 stopPropagation。

根据您的需要，可能还有其他解决方法：

<VueSlickCarousel @beforeChange="checkChange">
    ...
</VueSlickCarousel>

methods: {
    checkChange(oldSlideIndex, newSlideIndex) {
        if (newSlideIndex > oldSlideIndex) {
            console.log("Next button clicked");
        }
    }
}

另一种选择可能是使用 Carousel 标签内的 <template #nextArrow="{ currentSlide, slideCount }"></template> 插槽并使用您自己的按钮。如果你走这条路，你可能必须实现自己的逻辑来设置下一张幻灯片。

vue js组件挂载时如何给按钮绑定点击事件？

How to bind a click event to a button when component is mounted vue js?

eventtrigger

addeventlistener

vue.js