v-forリスト項目（Vue.js 2）内のdivを表示/非表示

Question

私はv-forループを持っており、そのループ内の項目をクリックするとdiv＃1とdiv＃2を非表示にします。次にdiv＃2のボタンをクリックしてdiv＃1を非表示にして再度表示します。そのリスト項目のみ。

テンプレート：

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

スクリプト：

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

Answer 1

あなたの方法は、スライダオブジェクトのshowEditメンバーを反転しているので、私はあなたがslider.showEditにバインドv-ifだけではなく、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> 

ここにjsFiddleがあります：https://jsfiddle.net/psteele/wn1npgqu/