CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Can
Can

Reputation: 693

How to check if value is equal to container ID in Vue?

I want to check if a property is equal to the ID of a div container. And add a condition to show the container when the check is equal.

In this example below, I just want to check if the activeWindow property is the same as the div id. When it's equal then I want to show the div container.

I have tried to add id in the if check, but that didn't work. When I add the string directly in the if check, like:

v-if="activeWindow === activeWindow"

then it works, but this time I have defined the ID at two places and it's not dynamic.

private activeWindow = 'activeWindow';

<div v-if="activeWindow === id" id="activeWindow">
 <h1>This window is active</h1>
</div>
<div v-if="activeWindow === id" id="activeWindow1">
  <h1>This window is active</h1>
</div>

How can I solve this?

Upvotes: 0

Views: 245

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

You can also bind id and make it both dynamic:

<div v-if="activeWindow === id" :id="id">
 <h1>This window is active</h1>
</div>

in data function:

data() {
  return {
    id: 'active',
    activeWindow : 'active'
  }
}

Upvotes: 1

Related Questions