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

Question

I am reworking an old app of mine and I am having issues with dom manipulation and basic selections within a vue instance.

Essentially I have information in a database that I load in via ajax. Each record in the db has 2 sections. The header tab(title, time, date etc) and the body of the record(notes, ideas, etc)

When loaded, the header shows normally to the user but if they want to see what that note contains, they have to click on the header for the bottom to appear.

consider the following html:

<vuejs for loop>
    <div v-bind:id='item._id' class="tabW" v-on:click="blueTabClick"  >
        <div class="blueTabMainColor">
            <!-- header stuff here -->
        </div>
    
    
         <div class="notesOpenedW">
            <!-- interior informaton here, HIDDEN BY CSS -->
        </div>                         
    </div>
<vuejs for loop ender>

This HTML is essentially inside a Vue for/loop directive, and generates however many "tabs(tabW)" as needed based on how much info I have in the DB

All I want the user to do is to be able to click whichever tab(tabW) they want information on, and for the notes show underneath(notesOpenedW).

I stripped my entire app and js and tried to keep it as simple a test as possible and even with the below, I still can't get anything. here is my JS(JQ):

 $(document).ready(function(evt){
    $(".blueTabMainColor").click(function(){
        $(this).next(".notesOpenedW").fadeToggle();
    });
 });

With this basic code, when I put it inside a Vue instance, via:

methods: {
           
    blueTabClick: function (evt) {
        evt.preventDefault();

        $(".blueTabMainColor").click(function(){
            //alert("you clicked me");
            $(this).next(".notesOpenedW").fadeToggle();
        });
    }
}

It doesn't work, but if I take it out of the Vue instance, it works just fine.

how can I get this to work? or am I going about it the wrong way?

You'll need to take advantage of the mounted lifecycle event in Vue. — Bert
– Bert, Commented Feb 19, 2018 at 14:24

bbsimonbb · Accepted Answer · 2018-02-19 14:20:48Z

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.

answered Feb 19, 2018 at 14:20

bbsimonbb

29.3k18 gold badges93 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 05:22:08Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related