使用 vue.js 获取调用元素

Question

我想获取 vue.js 中的调用 html 元素，以便通过 jQuery 对其进行修改。现在我给每个元素赋予 class 名称 + 索引，然后通过 jQuery 调用它，但这看起来像一个疯狂的 hack。

我想做的事情：

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",
    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 2

您希望 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();
    }
}

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

[demo]

使用 vue.js 获取调用元素

Get the calling element with vue.js

html

javascript

jquery

vue.js