Arama öğesini vue.js ile alın

Question

jQuery ile değiştirmek için arama html öğesini vue.js aracına almak istiyorum. Şimdilik her elemanı sınıf adı + dizinine verdim ve daha sonra jQuery ile aradım ama bu çılgın bir hack gibi görünüyor. Yapmak istediğim ne

: Ben div-elemanı almak için fonksiyonun içine geçebilir ne

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

ya ulaşmak için başka bir yol yoktur:

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

Bu çağrı unsurdur bu?

Answer 1

Böyle olaydan eleman alabilir: o zaman

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

Ve:

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

Ya (eğer başka bir parametre geçmek istersiniz):

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

[demo]

Answer 2

Yanlış yapıyorsunuz.

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

data uygulamanız için veri durumunu veya depolama olduğunu.

Eğer yöntemlerle

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

    }, 
    methods: { 

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

}); 

Answer 3

Sen v-el üzerinde jQuery çalıştırmak mümkün istiyorum için methods nesne oluşturmak gerekir.

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

sonra: Örneğin:

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