2015-08-10 19 views
15

Ho appena iniziato a utilizzare Vue.js e mi trovo continuamente rivolto a jQuery per aiutare in determinate situazioni. Più di recente ho tentato di "innescare" (o emulare) un evento senza successo, ad esempio un evento clic o sfocatura.È possibile attivare eventi utilizzando Vue.js?

So che in jQuery è possibile effettuare le seguenti operazioni:

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

Ma come può questo essere acheived utilizzando Vue.js? Sto volendo allontanarmi dall'uso di jQuery il più possibile.

Prendere il sotto come esempio:

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

Se dovessi chiamare anotherRandomFunciton, vorrei che per emulare (o trigger) l'evento click sopra. Tuttavia, cerco questo evento (o e nell'esempio precedente) non viene mai passato alla funzione.

Vue.js ha un metodo per raggiungere questo obiettivo?

+0

Stai bene usando il javascript? – Luminous

+0

Credo di sì, ma se è così posso anche usare jQuery. Ho pensato che forse ci fosse un modo migliore per farlo usando Vue.js –

+0

Hai controllato i metodi di istanza? Sei in grado di chiamare eventi lì e ascoltare gli eventi in un modo più jQuery. http://vuejs.org/api/instance-methods.html – Luminous

risposta

16

È necessario ottenere un riferimento al pulsante utilizzando v-el in questo modo:

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

Poi, nel tuo metodo:

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

E 'solo un evento nativo DOM click. Vedere v-el Documentation

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

Dal Vue utilizza e ne intercetta solo gli eventi DOM nativo. È possibile attivare eventi DOM nativo utilizzando il Element#dispatchEvent in questo modo:

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

Questo non è esattamente ideale o migliori pratiche. Idealmente, dovresti avere una funzione che gestisce gli interni e un gestore di eventi che chiama tale funzione. In questo modo, puoi chiamare gli interni ogni volta che ne hai bisogno.

+6

È stato sostituito in Vue2: https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced. Ora dovresti usare [#ref] (https://vuejs.org/v2/api/#ref) – oliverpool

3

Vue è per sua natura strettamente focalizzato - si intende che altri pacchetti come jQuery possano essere utilizzati con esso. Penso che l'uso di jQuery trigger sia perfetto.

Tuttavia, se si desidera creare i propri eventi senza jQuery, controlla dispatchEvent:

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

Oppure, nel caso specifico di clic, c'è un metodo su elementi DOM è possibile utilizzare:

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

+0

Grazie, apprezza i link utili. –

0

Se qualcuno inciampa su questo, questo è come ho fatto:.

Quando si utilizza questa $ refs.myBtn.click() ottengo “TypeError Uncaught:. Questo $ refs.myBtn.click non è una funzione”

cambiato in:.. questo $ refs.myBtn $ el.click()

Per essere chiari:‘$ el’deve essere aggiunto per funziona.

Problemi correlati