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

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

• javascript
• vue.js
• vuejs2

• I'd create a ponent for each list item – Phil Commented May 2, 2017 at 2:33
• @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 Commented May 10, 2017 at 19:59

3 Answers 3

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 remended practice now to declare key in loops.

Read relevant doc here.

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,
    },]
  };
}

If you also want to hide it when the user click on it by second time you need to add a ternary paration "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,
  };
}