CODEWITHSUNDEEP
vue.jsvuejs2vue-component
topograph
topograph

Reputation: 107

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

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?

Upvotes: 0

Views: 2884

Answers (1)

IVO GELOV
IVO GELOV

Reputation: 14259

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>

Upvotes: 1

Related Questions