Czy można uruchamiać zdarzenia przy użyciu Vue.js?

Question

Właśnie zacząłem używać Vue.js i znajduję się ciągle zwracając się do jQuery, aby pomóc w pewnych sytuacjach. Ostatnio próbowałem, bezskutecznie "wyzwalać" (lub emulować) wydarzenie, takie jak zdarzenie typu "kliknij i rozmycie".

wiem w jQuery można wykonać następujące czynności:

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

Ale jak można to acheived użyciu Vue.js? Chciałbym odejść od używania jQuery w jak największym stopniu.

Weź poniżej jako przykład:

<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> 

Gdybym był zadzwonić anotherRandomFunciton, chciałbym go naśladować (lub wyzwalacza) Powyższe zdarzenie click. Jednak próbuję to zdarzenie (lub e w powyższym przykładzie) nigdy nie zostanie przekazane do funkcji.

Czy Vue.js posiada metodę osiągnięcia tego?

Answer 1

Musisz się odniesienie do przycisku stosując v-el tak:

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

Następnie w metodzie:

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

To tylko rodzimy DOM zdarzenia kliknięcia. Zobacz v-el Documentation

Albo od 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> 

Od Vue wykorzystuje i nasłuchuje tylko rodzimy zdarzeń DOM. Można wywołać rodzimych zdarzeń DOM za pomocą Element#dispatchEvent tak:

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(); 

To nie jest dokładnie idealne lub najlepsze praktyki. Najlepiej, gdybyś miał funkcję, która obsługuje obiekty wewnętrzne i funkcję obsługi zdarzeń, która wywołuje tę funkcję. W ten sposób możesz zadzwonić do wewnętrznych, gdy zajdzie taka potrzeba.

Answer 2

Vue jest z natury ściśle skupiony - ma na celu użycie innych pakietów takich jak jQuery. Myślę, że używanie jQuery's trigger jest w porządku.

Jednakże, jeśli chcesz tworzyć własne zdarzenia bez jQuery, sprawdź dispatchEvent:

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

Albo, dla konkretnego przypadku kliknięcia, nie jest to metoda na elementach DOM można używać:

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

Answer 3

Jeśli ktoś natknie się na to, to jest, jak to zrobiłem.

Podczas korzystania to $ refs.myBtn.click() uzyskać „Uncaught TypeError. To $ refs.myBtn.kliknij nie jest funkcją”

Zmieniono go na adres:.. to $ refs.myBtn $ el.click()

Żeby było jasne:«$ el»należy dodać do to działa.