[Vuejs]-How to Target DOM elements in v-for

by

0👍

I didn’t try it, but this should work.

Add a variable in your vue data to manage comments visibility.

data: function() {
    return {
        noComments: false;
    }
},

then set the button to toggle visibility

<button v:on:click="noComments = !noComments"></button>

and, at the end, use v-if to check the new variable’s value. If comments are hidden just check if the current comment is one of the last two 

<div v-if="!noComments || entry.comments.length == index + 1 || entry.comments.length == index" 
     v-for="(comments,index) in entry.comments">
    <p>{{ comments.content}}</p>
</div>

IMPORTANT: remember to add index in v-for

Leave a comment