Có thể kích hoạt các sự kiện bằng Vue.js không?

Question

Tôi vừa mới bắt đầu sử dụng Vue.js và thấy mình liên tục chuyển sang jQuery để trợ giúp trong một số trường hợp nhất định. Gần đây nhất tôi đã cố gắng, không thành công "kích hoạt" (hoặc mô phỏng) một sự kiện, chẳng hạn như một sự kiện nhấp chuột hoặc mờ.

Tôi biết trong jQuery bạn có thể làm như sau:

$('#my-selector').trigger('click'); 

Nhưng cách này có thể đạt được bằng Vue.js? Tôi muốn tránh xa việc sử dụng jQuery càng nhiều càng tốt.

Lấy dưới đây là một ví dụ:

<div id="my-scope"> 
    <button type="button" v-on="click: myClickEvent">Click Me!</button> 
</div> 

<script> 
new Vue({ 
    el: "#my-scope", 
    data: { 
     foo: "Hello World" 
    }, 
    methods: { 
     myClickEvent: function(e) { 
      console.log(e.targetVM); 
      alert(this.foo); 
     }, 
     anotherRandomFunciton: function() { 
      this.myClickEvent(); 
     } 
    } 
}); 
</script> 

Nếu tôi đã gọi anotherRandomFunciton, tôi muốn nó bắt chước (hoặc kích hoạt) sự kiện click trên. Tuy nhiên, tôi thử sự kiện này (hoặc e trong ví dụ trên) không bao giờ được chuyển đến hàm.

Vue.js có phương pháp để đạt được điều này không?

Answer 1

bạn cần phải nhận được một tham chiếu đến nút của bạn bằng cách sử dụng v-el như vậy:

<button type="button" @click="myClickEvent" v-el:my-btn>Click Me!</button> 

Sau đó, trong phương pháp của bạn:

function anotherRandomFunction() { 
    var elem = this.$els.myBtn 
    elem.click() 
} 

Nó chỉ là một sự kiện DOM nhấp chuột mẹ đẻ. Xem v-el Documentation

Hoặc kể từ Vue 2.x:

<template> 
    <button type="button" @click="myClickEvent" ref="myBtn"> 
     Click Me! 
    </button> 
</template> 

<script> 
export default { 
    methods: { 
     myClickEvent($event) { 
      const elem = this.$refs.myBtn 
      elem.click() 
     } 
    } 
} 
</script> 

Kể từ Vue sử dụng và lắng nghe chỉ sự kiện DOM bản địa. Bạn có thể kích hoạt sự kiện DOM gốc bằng cách sử dụng số Element#dispatchEvent như vậy:

var elem = this.$els.myBtn; // Element to fire on 

var prevented = elem.dispatchEvent(new Event("change")); // Fire event 

if (prevented) {} // A handler used event.preventDefault(); 

Đây không phải là lý tưởng chính xác hoặc thực tiễn tốt nhất. Lý tưởng nhất, bạn nên có một hàm xử lý các nội bộ và một trình xử lý sự kiện gọi hàm đó. Bằng cách đó, bạn có thể gọi các internals bất cứ khi nào bạn cần.

Answer 2

Vue là do bản chất của nó tập trung hẹp - nó được dự định rằng các gói khác như jQuery được sử dụng với nó. Tôi nghĩ rằng sử dụng jQuery của trigger là tốt.

Tuy nhiên, nếu bạn muốn tạo sự kiện của riêng bạn mà không cần jQuery, hãy kiểm tra dispatchEvent:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Hoặc, đối với trường hợp cụ thể của nhấp chuột, có một phương pháp trên các yếu tố DOM bạn có thể sử dụng:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Answer 3

Nếu ai đó tình cờ gặp này, đây là cách tôi đã làm nó:.

Khi sử dụng này $ refs.myBtn.click() tôi nhận được “lỗi chưa gặp:. $ Này refs.myBtn.bấm không phải là một chức năng”

thay đổi nó để:.. này $ refs.myBtn $ el.click()

Để được rõ ràng:‘$ el’cần phải được bổ sung cho nó hoạt động.