Currently, I am utilizing a for-loop to retrieve all of my posts, followed by employing a partial to obtain a list of all the usersThatUpvoted on that post.
<div v-for="p in posts" style="padding: 16px">
<div>
<%- partial('../../partials/upvoter') %>
</div>
</div>
The content within the partial is structured as follows:
<div style="background-color: white;padding: 16px;
display: flex; flex-direction: column;">
{{p.usersThatUpvoted}}
</div>
Despite being close to functioning correctly, there are extra arrays that I want to eliminate. When clicking on the first post, only the corresponding usersThatUpvoted should be displayed:
https://i.sstatic.net/9B2IM.png
Similarly, upon clicking on the second post, the relevant usersThatUpvoted should be shown:
https://i.sstatic.net/4v3hT.png
I wish to ensure that unnecessary arrays are removed. A previous Stack Overflow thread delved into targeting a specific item within the loop index: How to put class="active" to first element in vuejs for loop
My goal is to make this process dynamic so that the active item can vary (apologies if that's not the correct terminology). However, when attempting to use "active", an error is triggered:
Property or method "active" is not defined on the instance but referenced during render.