How to toggle class in vue js of a specific item in v-for

Question

How can i toggle by btn specific div from list of items , which one i got from json and display using v-for ?

I am understand that i can`t just set v-if to div and add to vue data , but in this case it fill open and close all divs

 <div class="about" v-if="list">
                  <div class="dat"  v-for="data in item.items_situation" :key="data.a">
                        {{data.doc_valid_through}}
                        {{data.document_type}}
                        {{data.item_nr_full}}
                        {{data.item_text}}
                </div>
                <div class="situation-btn">
                    <input class="situatuin-btn" type="submit" value="Подбробнее" v-on:click="hide">
                </div>
            </div>

When i click the button i want to toggle one div not all

share code snippet ?

Niklesh Raut
– Niklesh Raut

2019-06-13 09:55:34 +00:00
Commented Jun 13, 2019 at 9:55 — Niklesh Raut
– Niklesh Raut, Commented Jun 13, 2019 at 9:55

Emīls Gulbis · Accepted Answer · 2019-06-13 10:06:20Z

There are many ways to achieve this, I'll provide one for you.

Map your JSON array in data by adding visible property for every item.
Add button inside loop (so its attached for every item) and make visible = false by clicking it.
Display filtered results (visible === true only)

new Vue({
  el: "#app",
  
  data: {
    items: [
      { text: "Learn JavaScript", id: 1 },
      { text: "Learn Vue", id: 2 },
      { text: "Play around in JSFiddle", id: 3 },
      { text: "Build something awesome", id: 4 }
    ].map(item => ({...item, visible: true})),
    
    hiddenItems: []
  },
  
  
  computed: {
    visibleItems() {
      return this.items.filter(item => item.visible)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="dat" v-for="item in visibleItems" :key="item.id">
    {{item.text}}
    <button v-on:click.prevent="item.visible = false">X</button>
  </div>
</div>

tony19 · Accepted Answer · 2022-07-16 05:49:52Z

0

You can use v-bind:class to dynamically add class to elements. Code should be like this:

<div class="about" v-if="list">
    <div v-for="data in items" v-bind:class="{hide: data.isHidden}" :key="data.key">
        Something
    </div>
    <div class="situation-btn">
        <input class="situatuin-btn" type="submit" value="Подбробнее" v-on:click="hide">
    </div>
</div>

Then in hide

hide(){
    this.items[i].isHidden = true
}

The data.isHidden property decides whether an element in list should have hide class. See also Class and Style Bindings.

-------Edited-------

I have posted an example here

edited Jul 16, 2022 at 5:49

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jun 13, 2019 at 10:13

Semesse

213 bronze badges

4 Comments

Bravis Over a year ago

How it supposed to call exactly for instance second div ? When should i define [i] , can you describe a little bit more ?

Semesse Over a year ago

@Bravis Well i is just the index of element in list to be hidden, so if you want the second to hide you just need to change it to this.data.items[1].isHidden = true. And as there is no style applied to class hide you'll need to write CSS for this class yourself like .hide{ display: none; }.

Bravis Over a year ago

i dont know , it does`not work , event this data.isHidden , how it supposed to work ? i should have this data in my Json , i dont

Semesse Over a year ago

Sorry i made a mistake and i have edited my answer. It should be this.items[i].isHidden not this.data.items[i].isHidden

Collectives™ on Stack Overflow

How to toggle class in vue js of a specific item in v-for

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related