Get the calling element with vue.js

后端 未结 3 854
隐瞒了意图╮
隐瞒了意图╮ 2021-02-13 12:54

I want to get the calling html element in vue.js to modify it via jQuery. For now I give every element the class name + the index and call it via jQuery afterwards, but this loo

相关标签:
3条回答
  • 2021-02-13 13:08

    Youre doing it the wrong way.

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

    data is the state or storage of data for your app.

    you need to create methods object for your methods

    new Vue({
        el: "#app",
        data: {  
    
        },
        methods: {
    
        testFunction : function(element) {
                $(element).doSomethingWithIt(); //do something with the calling element
            }
        }
    
    });
    
    0 讨论(0)
  • 2021-02-13 13:17

    You want v-el to be able to run jQuery on it. For example:

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

    then:

    // as noted by @vistajess
    // your function should be in the methods object
    // not the data object
    methods: {
        testFunction : function() {
            $(this.$els.myElement).doSomethingWithIt();
        }
    }
    
    0 讨论(0)
  • 2021-02-13 13:28

    You could get the element from the event like this:

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

    And then:

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

    Or (if you want to pass another parameter):

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

    [demo]

    0 讨论(0)
提交回复
热议问题