ahora mismo estoy trabajando en la aplicación web Episerver y soy nuevo en vue.js, así que necesito su ayuda. Necesito detectar acordeón dentro de acordeón para poder darle margen izquierdo, así sangrar, para que quede claro que es acordeón dentro de acordeón y no solo dos acordeones uno tras otro.

cshtml actual se ve así:

 <generic-component inline-template class="vue-block-app" server-rendered="true" > <div> <div v-bind:class="{isNested: isNested('@collapseId','collapsible-list-item-block')}" class="collapsible-list-item-block grid @Model.GetHiddenPrintClassName"> <div class="collapsible-list-item-block__heading" id="headingOne" @@click="collapsibleClicked('@collapseId')"> <div class="@collapseButtonClass" vb-toggle="'@collapseId'" variant="primary"> <div class="text-line-content">@Html.PropertyFor(m => m.Title)</div> <div class="icon-wrap float-right"> <span class="collapseIcon">@{Html.RenderCollapseIcon();}</span> <span class="expandIcon">@{Html.RenderExpandIcon();}</span> </div> </div> </div> <b-collapse id="@collapseId" @collapsedByDefault class="collapsible-list-item-block__content" style="display: none;"> @Html.PropertyFor(m => m.Content) </b-collapse> </div> </div>

mi archivo vue se ve así:

 <script> import componentMounted from '../mixins/component-mounted'; export default { mixins: [componentMounted], data() { return { isNestedAccordion: false, }; }, computed: { }, methods: { collapsibleClicked(id) { $(window).trigger("collapseClicked", [id]); }, isNested(id, className) { var element = document.getElementById(id); do { if (element.classList && element.classList.contains(className)) { console.log("true") return true; } element = element.parentElement.parentElement; } while (element); console.log("false") return false; } } }

y clase css .isNested{margin-left:20px;}

¿Qué estoy haciendo mal que no estoy obteniendo clase para mi div.... Por cierto, cuando tenía mi isNested() dentro de collapsibleClicked() funcionó bien al hacer clic... ¿qué me estoy perdiendo?