I have a v-for loop and when the item within that loop is clicked I want to hide div#one and show div#two. Then click a button in div#two to hide and show div#one again. Only for that list item.

Template:

<div v-for="slider in slideritems">
    <div v-if="!showEdit" @click="openEditor(slider)">
        Normal list item, click to show edit options
    </div>
    <div v-if="showEdit">
        <div @click="closeEditor(slider)">Close</div>
        Edit options (if selected)
    </div>
</div>

Scripts:

export default {
    methods: {
        openEditor(slider) {
            slider.showEdit = true
        },
        closeEditor(slider) {
            slider.showEdit = false
        }
    }
}

I have a v-for loop and when the item within that loop is clicked I want to hide div#one and show div#two. Then click a button in div#two to hide and show div#one again. Only for that list item.

Template:

<div v-for="slider in slideritems">
    <div v-if="!showEdit" @click="openEditor(slider)">
        Normal list item, click to show edit options
    </div>
    <div v-if="showEdit">
        <div @click="closeEditor(slider)">Close</div>
        Edit options (if selected)
    </div>
</div>

Scripts:

export default {
    methods: {
        openEditor(slider) {
            slider.showEdit = true
        },
        closeEditor(slider) {
            slider.showEdit = false
        }
    }
}

• javascript
• html
• list
• vue.js
• vuejs2

• You never defined a closeEditor method -- you have two openEditor methods. Was that just a typo in the question? Also, what is your actual question? Is something not working? – PatrickSteele Commented Feb 11, 2017 at 14:08
• Well spotted, it was an error typing it into SO, it doesn't actually fix the issue. I've updated my question slightly. I want to show and hide certain div's within a loop item. But only for that item. – Jack Barham Commented Feb 11, 2017 at 14:28

2 Answers 2

Since your methods are flipping the showEdit member of the slider object, I think you want v-if bound to slider.showEdit, not just showEdit:

<div v-for="slider in slideritems">
    <div v-if="!slider.showEdit" @click="openEditor(slider)">
        Normal list item, click to show edit options
    </div>
    <div v-if="slider.showEdit">
        <div @click="closeEditor(slider)">Close</div>
        Edit options (if selected)
    </div>
</div>

Here's a working jsFiddle: https://jsfiddle/psteele/wn1npgqu/

<li v-for="(data, index) in skills" :key="index+1">
  {{index + 1}}. {{data.skillName}}
  <i v-b-toggle="index + 1" class="fa fa-plus-circle"></i>             
  <b-collapse v-bind:id="index + 1" class="mt-2">Here will be your result</b- 
 collapse>
</li>

You can get an idea from bootstrap-vue.js. I solve my purpose with that. Here is the link https://bootstrap-vue.js/docs/ponents/collapse/