Zeigen und verbergen divs in v-für Listenelemente (Vue.js 2)

Question

Ich habe eine v-for-Schleife und wenn das Element innerhalb dieser Schleife angeklickt wird, möchte ich div # ein ausblenden und div # two anzeigen. Klicken Sie dann auf eine Schaltfläche in div # two, um div # eins wieder zu verbergen und anzuzeigen. Nur für diesen Listeneintrag.

Vorlage:

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

Answer 1

Da Ihre Methoden, um das showEdit Mitglied des Slider-Objekts sind Spiegeln, ich glaube, Sie v-if zu slider.showEdit gebunden wollen, nicht nur 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> 

Hier ist eine funktionierende jsFiddle: