javascript - 在 v-for 列表项中显示和隐藏 div (Vue.js 2)

Question

我有一个 v-for 循环，当单击该循环中的项目时，我想隐藏 div#one 并显示 div#two。然后单击 div#two 中的按钮再次隐藏和显示 div#one。仅针对该列表项。

模板:

<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

由于您的方法正在翻转 slider 对象的 showEdit 成员，我认为您希望将 v-if 绑定(bind)到 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/