vue v-for loop, add class individual

Question

I am using v-for to loop through a list and display that list.

Now after rendering, each list has a title and hidden content, and I want to be able, once I select one title of that list, to have its content to be shown and not all content.

So far I am doing this (thanks to @thanksd):

<div class="link">
  <p @click="show = true"> Click here to show the content </p>
  <div v-show="show" class="content">
    <p>This is the hidden content</p>
  </div>
</div>
<div class="link">
  <p @click="show = true"> Click here to show the content </p>
  <div v-show="show" class="content">
    <p>This is the hidden content</p>
  </div>
</div>

data() {
  return {
    show: false,
  };
}

@Peter what do you think that you are doing by down voting my posts just for english grammar mistakes ? English is not my primary language, and my family didn't have money to send me to fancy English Courses but I learned everything I know from Movies! — Marketingexpert
– Marketingexpert, Commented May 10, 2017 at 19:59

tony19 · Accepted Answer · 2022-07-17 23:41:51Z

2

You can write something like this:

<div class="link" v-for="(item, index) in items" :key="index">
  <p @click="show = index"> Click here to show the content </p>
  <div v-show="show === index" class="content">
    <p>This is the hidden content</p>
  </div>
</div>

If you are iterating an object, the syntax is v-for="(value, key) in items". Also it's a recommended practice now to declare key in loops.

Read relevant doc here.

edited Jul 17, 2022 at 23:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 2, 2017 at 2:38

Leo

13.9k5 gold badges46 silver badges64 bronze badges

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

3 Comments

Marketingexpert Over a year ago

thank you very much, following your advice, now I will be using key in each loop since I was not doing it :) Thank you! PS. This worked perfect by the way! Thnx

Leo Over a year ago

@Marketingexpert Actually, if you upgrade to the latest version of Vue, you will see warnings in console if you doesn't declare key. This is not mandatory now but could potentially improve performance. Here's the doc.

Marketingexpert Over a year ago

I am using "vue": "^2.2.4", and I didn't receive any error, even though I will be using since it's recommended :) thnx for bringing it to my attentions

Gerardo Rosciano · Accepted Answer · 2017-05-02 02:33:59Z

There are many ways to do this, if you are building the variable that will list the content, then it's easier

<div class="link" v-for="link in links">
  <p @click="link.show = true"> Click here to show the content </p>
  <div v-show="link.show" class="content">
    <p>{{ link.content }}</p>
  </div>
</div>

data() {
  return {
    links: [{
        title: 'the title',
        content: 'the hidden content',
        show: false,
    },{
        title: 'the other title',
        content: 'the other hidden content',
        show: false,
    },]
  };
}

Juanma Menendez · Accepted Answer · 2017-07-15 20:05:05Z

If you also want to hide it when the user click on it by second time you need to add a ternary comparation "show === index ? show = -1 : show = index" to the @Leo answer:

<div class="link" v-for="(item, index) in items" :key="index">
  <p @click="show === index ? show = -1 : show = index"> Click here to show the content </p>
  <div v-show="show === index" class="content">
    <p>This is the hidden content</p>
  </div>
</div>

data() {
  return {
    show: -1,
  };
}

Collectives™ on Stack Overflow

vue v-for loop, add class individual

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related