How to set vue component property based on if parent element has a specific class?

Question

I have this stucture in my parent Component:

<div class="section" >
    <VRVideoPage :isActive="false"></VRVideoPage>
</div>

Via a third-party tool it's possible that the "section"-div gets a css class named "active" added.

I now want to toggle the ":isActive" property on the VRVideoPage component to true, whenever the active class is applied to its parent.

Is this achivable via the vue template syntax?

a class attribute is not reactive. You should get class active to a prop in data section via third-party tool. That way you can use the prop moth for class in section div and to pass to VRVideoPage — Anatoly

IVO GELOV IVO GELOV · Accepted Answer · 2020-06-04T10:43:31

You can try like this but it is not a good practice and may not work:

<div class="section" >
    <VRVideoPage ref="video" :isActive="$refs.video.$el.parentNode.classList.contains('active')"></VRVideoPage>
</div>