In my project, I am utilizing Laravel 6 in combination with Vue.js 2.
To iterate through users and showcase their information within div elements, I am using a for loop outlined below.
The Category names are stored in user.pivot.demo2, and the users are sorted by category utilizing lodash:
_.orderBy(this.category.users, ['pivot.demo2', 'pivot.demo3'])
I want to ensure that the div with the class of "row" appears only once for each category. By having the category name displayed only if it is the first in the list or does not match the previous one, all users are separated by category when displayed, with the respective category caption placed above their divs. While this setup works perfectly, I'm struggling with ensuring that the outer div with the class "row" is generated only once per category, then filled with the user divs with the class "col-lg-4."
In Laravel's Blade, achieving this would involve logic like:
@if(category != the-same-category)
<div class="row">
@endif
@if (category == the-same-category)
<div class="col-lg-4">{{ User.name }} </div>
@endif
@if(category != the-same-category)
</div>
@endif
This logic ensures that the div with the "row" class is displayed only once per category, while the inner divs with the "col-lg-4" class repeat on every loop. It also closes the div at the right conditions, resulting in each category having its own divs with the user inside a single row div. However, I have been unable to find a similar solution for Vue.js. Can anyone suggest a JavaScript or Vue.js approach to achieve this behavior?
Currently, my Vue code looks like this:
<div class="outer-div text-center" v-for="(user, index) in the_category.users" :key="user.id">
<div v-if="index === 0 || user.pivot.demo2 != the_category.users[index -1].pivot.demo2">
<div class="text-center header-one">
<h2>{{ user.pivot.demo2 }}</h2>
</div>
<hr />
</div>
<div class="row d-flex justify-content-center"> // display once per category
<div class="outer-profile-div col-md-4"> // display every loop
<div class="user-name text-center">{{ user.name }}</div>
<div class="user-title text-center">{{ user.title }}</div>
</div>
</div>
Ultimately, my aim is to showcase the ".outer-profile-div" elements next to each other, wrapping as typical bootstrap divs inside a ".row", all while maintaining responsiveness. I am open to utilizing CSS, JavaScript, Vue.js, or any other method that can help achieve the desired outcome.