Получить вызывающий элемент с vue.js

Question

Я хочу получить вызывающий элемент html в vue.js для его изменения через jQuery. На данный момент я даю каждому элементу имя класса + индекс и вызываю его через jQuery впоследствии, но это выглядит как сумасшедший хак.

Что я хочу сделать:

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

Это вызывающий элемент:

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

Что я могу передать в функцию, чтобы получить Div-элемент или есть другой способ достижения это?

Answer 1

Вы можете получить элемент из события, как это:

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

А потом:

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

Или (если вы хотите передать еще один параметр):

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

[demo]

Answer 2

Вы делаете это неправильно.

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

data является состояние или хранения данных для вашего приложения.

вам нужно создать methods объект для методов

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

    }, 
    methods: { 

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

}); 

Answer 3

Вы хотите v-el, чтобы иметь возможность запускать JQuery на него. Например:

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

затем:

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