Ottieni l'elemento chiamante con vue.js

Question

Desidero ottenere l'elemento html chiamante in vue.js per modificarlo tramite jQuery. Per ora attribuisco ad ogni elemento il nome della classe + l'indice e lo chiamo via jQuery in seguito, ma questo sembra un pazzo hack.

Quello che voglio fare:

new Vue({ 
    el: "#app", 
    data: { 
     testFunction : function(element) { 
      $(element).doSomethingWithIt(); //do something with the calling element 
     } 
    } 
}); 

Questo è l'elemento di chiamata:

<div v-on:click="testFunction(???)">Test</div> 

Cosa posso passare nella funzione per ottenere il div-elemento o c'è un altro modo per raggiungere Questo?

Answer 1

Si potrebbe ottenere l'elemento dal evento come questo:

new Vue({ 
    el: "#app", 
    methods: { 
     testFunction : function(event) { 
      $(event.target).doSomethingWithIt(); 
     } 
    } 
}); 

E poi:

<div v-on:click="testFunction">Test</div> 

o (se vuoi passare un altro parametro):

<div v-on:click="testFunction($event)">Test</div> 

[demo]

Answer 2

Stai facendo nel modo sbagliato.

new Vue({ 
    el: "#app", 
    data: { 
     testFunction : function(element) { 
      $(element).doSomethingWithIt(); //do something with the calling element 
     } 
    } 
}); 

data è lo stato o la conservazione dei dati per la vostra applicazione.

è necessario creare methods oggetto per i metodi di

new Vue({ 
    el: "#app", 
    data: { 

    }, 
    methods: { 

    testFunction : function(element) { 
      $(element).doSomethingWithIt(); //do something with the calling element 
     } 
    } 

}); 

Answer 3

Volete v-el per essere in grado di eseguire jQuery su di esso. Per esempio:

<div v-on:click="testFunction" v-el:my-element>Test</div> 

poi:

// as noted by @vistajess 
// your function should be in the methods object 
// not the data object 
methods: { 
    testFunction : function() { 
     $(this.$els.myElement).doSomethingWithIt(); 
    } 
}