[Vuejs]-Add a class to parent element when child element attribute aria expanded is true

by

0👍

Did you try the :first-child?

https://www.w3schools.com/cssref/sel_firstchild.asp

0👍

May be you can use the index in you v-for and define the gray-bg at your styles, then use the index === 0 to deside if is needed to show the gray background ,I hope it can work for you

<template>
<!-- ... -->
    <li v-for="(item, index) in locations" :key="index">
        <div id="active-hov-div" :class="{'gray-bg':index === 0}">
            <a
                id="brand-nav-item-link-id"
                class="brand-nav-item-link"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
            >
                <label class="active-hov">
                    {{item.label}}
                </label>
                <i class="fa fa-sort-down test-down"></i>
                <i class="fa fa-sort-up test-up"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end locations-ul">
    <li class="locations-li">
        <FindACommunity />
    </li>
    <ul class="locations-dropdown-ul">
        <li v-for="(item3, index3) in item.locationsTitles" :key="index3" class="nav-item" style="padding-bottom: 8px">
            <a class="brand-nav-dropdown-link" :href="item3.url">{{item3.title}}</a>
        </li>
    </ul>
    </div>
    </div>
    </li>
<!-- ... -->
</template>

<style>
/*...*/
 .gray-bg {
     background-color: gray;
 }
/*...*/
</style>

Leave a comment