Я хочу получить вызывающий элемент 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-элемент или есть другой способ добиться этого?

13
landunder 14 Дек 2015 в 04:15

3 ответа

Лучший ответ

Вы можете получить элемент из события следующим образом:

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>

[ Демо ]

10
Pantelis Peslis 14 Дек 2015 в 07:04

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

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

});
0
vistajess 14 Дек 2015 в 01:21

Вы хотите, чтобы 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();
    }
}
0
ceejayoz 14 Дек 2015 в 01:22