CODEWITHSUNDEEP
javascriptvue.js
Karlom
Karlom

Reputation: 14834

vuejs how to display div based on dynamic array values?

I want to show/hide a new div if any of the user links clicked:

<ul id="pm-tabs"> 
  <li v-for="user in unreadMsgsList">       
     <a @click="openPMbox(user)"> ${user}</a>
  </li>
</ul>

the method is:

    openPMbox: function(user) {              
         this.isPmBoxOpenList[user] = !this.isPmBoxOpenList[user];
    },

the user data is stored at isPmBoxOpenList: [] and I can verify that it is properly filled.

The window that should show/hide is like this and is out of v-for loop above:

<div class="pmbox" v-bind:disabled=="isPmBoxOpenList" >Some Text </div>

But I get error at template. Not sure how should I define pmbox so appreciate your hints.

P.S. It worths mentioning user is not define in data. It is only an object in isPmBoxOpenList array.

Upvotes: 3

Views: 1093

Answers (1)

Saurabh
Saurabh

Reputation: 73589

You can use v-if, to display or hide like this:

<div class="pmbox" v-if="isPmBoxOpenList[user]" >Some Text </div>

Upvotes: 3

Related Questions