JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
<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>
</div>
JavaScript
var app = new Vue({
el: '#app',
data: {
slideritems: [
{ showEdit: false},
],
},
methods: {
openEditor(slider) {
slider.showEdit = true
},
closeEditor(slider) {
slider.showEdit = false
}
}
});