How to get currentTarget object by click

Question

When I use Jquery to get a object from current target it's work fine.

But same behavior I would like to achieve by vueJs but VueJs returns a dom not a object.

Using Jquery

    <a onclick="test(this)" type="button">Button</a>

    function test(e){
      console.log($(e));
    })

Result :

init [a.cursor_pointer, context: a.cursor_pointer]
    0: a.cursor_pointer
    context: a.cursor_pointer
    length: 1
    __proto__: Object(0)

Using VueJs

<a @click="test" type="button">Read more</a>

 methods:{
    test(e){
       console.log(e.target);
    }
}

Result :

<a type="button" class="cursor_pointer">Read more</a>

Answer 1

TL/DR; For what you are trying to do, there is no 1:1 jQuery to Vue equivalent.

It looks like you're logging jQuery's event this (the <a> element, in this context), coerced into a jQuery [prototype] object, in your jQuery example.

The e.target in your Vue example is equivalent to the unadorned e in your jQuery click handler.

By wrapping e in $() in test(), you are imbuing the <a> with the jQuery prototype (so it has access to the jQuery API and all of its methods).

There is no direct equivalent to the jQuery prototype in Vue but you can:

1. Include jQuery IN your Vue app
2. or, use equivalent vanilla JavaScript on the e.target to accomplish something similar. http://youmightnotneedjquery.com/ is a pretty good resource if you are not comfortable digging through the jQuery Source

EDIT In light of your clarification (which you should edit into your original question), it looks like you have encountered the key difference between how one approaches a problem with jQuery versus the approach in frameworks such as Vue, React, Angular (et cetera). That is to say, the difference between imperative and declarative programming. Here is a good description of that difference.

To do what you want in the "Vue way" you might create a component for your "review" blocks, with each review handling its "Read More/Read Less" state and toggling accordingly.

You could accomplish what you want in a Vue application using vanilla JavaScript or by including jQuery and adding your click listener in the mounted lifecycle hook. While not wrong, it isn't taking advantage of Vue's declarative-ness.