CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Delbo ar
Delbo ar

Reputation: 372

Vue.JS using class for element

I try to give v-if="seen" for some class but it doesn't work obviously...

My code:

<div class="item" v-if="seen">item 1</div>
<div class="item" v-if="seen">item 2</div>
<div class="item" v-if="seen">item 3</div>

var item = new Vue({
   el: 'div.item',
   data: {
       seen: true
   }
});

In JavaScript I could do :

var item = document.getElementsByClassName('item');
for(var i = 0; i < item.length; i++){
    item[i].style.display = "none";
}

How must I do in Vue.js ? Thanks

Upvotes: 1

Views: 268

Answers (4)

Vladislav Ladicky
Vladislav Ladicky

Reputation: 2489

There is many ways to achieve what you want. Example of one of them:

<div is="app">
  <div class="item" v-if="!seen.includes('item1')">
    item 1
  </div>
  <div class="item" v-if="!seen.includes('item2')">
    item 2
  </div>
  <div class="item" v-if="!seen.includes('item3')">
    item 3
  </div>
</div>

var item = new Vue({
  el: '#app',
  data: {
    seen: [
      'item1',
      'item3'
    ]
  }
})

Upvotes: 0

Simon Pasku
Simon Pasku

Reputation: 649

var item = new Vue({
   el: 'div.item',
   data: {
       isSeen: true
   },
    computed:{
     seen:()=>this.isSeen;
    }
});

or you could use v-show or v-class

Upvotes: -1

jremi
jremi

Reputation: 2969

You can try using a v-for and setup the data to use an array.

Try something like this:

<div id="app">
    <div v-for="myItem in items" class="item" v-if="myItem.seen">{{myItem.name}}</div>
</div>

var app = new Vue({
   el: '#app',
   data: {
       items : [{
           seen: true,
           name: 'item 1'
       },
       {
           seen: false,
           name: 'item 2'
       },
       {
           seen: false,
           name: 'item 3'
       }]
   }
});

Upvotes: 2

Zoe Edwards
Zoe Edwards

Reputation: 13667

The way Vue is designed, it should be ideally done like so:

<div id="app">
    <div class="item" v-if="seen">item 1</div>
    <div class="item" v-if="seen">item 2</div>
    <div class="item" v-if="seen">item 3</div>
</div>

var app = new Vue({
   el: '#app',
   data: {
       seen: true
   }
});

Upvotes: 2

Related Questions