Vue.JS using class for element

Question

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

Answer 1

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
   }
});

Answer 2

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'
       }]
   }
});

Answer 3

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'
    ]
  }
})

Answer 4

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

or you could use v-show or v-class