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

Your use of v-if is correct. You don't want to be setting up separate Vue instances for each div.item, though; that should be a single element containing the other divs. — Daniel Beck
– Daniel Beck, Commented Aug 9, 2018 at 13:50

jremi · Accepted Answer · 2018-08-09 14:03:23Z

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

answered Aug 9, 2018 at 14:03

jremi

2,9895 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Delbo ar Over a year ago

Thanks you so much

jremi Over a year ago

No problem :) Have fun coding

Zoe Edwards · Accepted Answer · 2018-08-09 13:47:53Z

2

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

answered Aug 9, 2018 at 13:47

Zoe Edwards

13.8k3 gold badges28 silver badges45 bronze badges

3 Comments

Delbo ar Over a year ago

The problem is how I do for apply seen:true for only one item and false for others then ?

jremi Over a year ago

check my answer... it should do exactly what you need.

Daniel Beck Over a year ago

You would need different variables controlling each of them, then.

user9805590 · Accepted Answer · 2018-08-09 14:15:40Z

0

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

answered Aug 9, 2018 at 14:15

user9805590

Comments

Simon Pasku · Accepted Answer · 2018-08-09 14:08:55Z

-1

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

or you could use v-show or v-class

answered Aug 9, 2018 at 14:08

Simon Pasku

6692 gold badges6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Vue.JS using class for element

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related