在v-for列表項目中顯示和隱藏div（Vue.js 2）

我有一個v-for循環，並且當該循環中的項目被點擊時，我想隱藏div＃1並顯示div＃2。然後點擊div＃2中的按鈕來隱藏並再次顯示div＃1。僅限於該列表項目。在v-for列表項目中顯示和隱藏div（Vue.js 2）

模板：

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

來源

2017-02-11 Jack Barham

你從來沒有定義'closeEditor'方法 - 你有兩個'openEditor'方法。這只是一個錯字嗎？另外，你真正的問題是什麼？有什麼不工作？ – PatrickSteele

當然，這是一個錯誤輸入到SO，它並沒有真正解決這個問題。我已經稍微更新了我的問題。我想要顯示並隱藏循環內的某些div。但只限於該項目。 –

因爲你的方法翻動滑塊對象的showEdit成員，我想你想v-if勢必slider.showEdit，不只是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/

來源

2017-02-11 21:34:26 PatrickSteele

在v-for列表項目中顯示和隱藏div（Vue.js 2）

回答

相關問題