[Vuejs]-How to capture clicked element using $(this) inside of a vue(js) instance

2👍

Vue will not cohabit happily with JQuery. You’re $(this) will not work because you’re not even in the document at that point, you’re in pure js, virtual DOM, another universe. Then, if it did, the event listener you call may not exist. You will need to fundamentally transition this code to Vue if you want it to work, I fear.

2👍

You can achieve this by setting a ref on "notesOpenedW".
https://v2.vuejs.org/v2/api/#ref
I would strongly recommend to wrap this behaviour in a dedicated component
That would have the following content :

<div class="tabW" v-on:click="blueTabClick"  >
    <div class="blueTabMainColor">
        <!-- header stuff here -->
    </div>


     <div class="notesOpenedW" ref="notesToggleDiv">
        <!-- interior informaton here, HIDDEN BY CSS -->
    </div>                         
</div>

And the method :

methods: {

blueTabClick: function () {
    $(this.$refs.notesToggleDiv).fadeToggle();
}
}

Be aware that when using Vue, manipulating directly the dom is usually a bad idea.
As i showed you, it is possible to use jQuery with Vue if you absolutely need it (or cannot afford to rework more deeply your application).

Edit : Just found this article that i think would help you a lot :
https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/?utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=Vue.js%20Developers

Leave a comment