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

【问题标题】：Show and hide divs within v-for list items (Vue.js 2)在 v-for 列表项中显示和隐藏 div (Vue.js 2)
【发布时间】：2017-06-29 19:23:31
【问题描述】：

我有一个 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
        }
    }
}

【问题讨论】：

您从未定义过closeEditor 方法——您有两个openEditor 方法。这只是问题中的错字吗？另外，您的实际问题是什么？有什么不工作吗？
很好，将它输入 SO 是一个错误，它实际上并不能解决问题。我已经稍微更新了我的问题。我想在循环项目中显示和隐藏某些 div。但仅限于该项目。

标签： javascript html list vue.js vuejs2

【解决方案1】：

由于您的方法正在翻转滑块对象的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/

【讨论】：

【解决方案2】：

<li v-for="(data, index) in skills" :key="index+1">
  {{index + 1}}. {{data.skillName}}
  <i v-b-toggle="index + 1" class="fa fa-plus-circle"></i>             
  <b-collapse v-bind:id="index + 1" class="mt-2">Here will be your result</b- 
 collapse>
</li>

您可以从 bootstrap-vue.js 中获得灵感。我用它来解决我的目的。这是链接https://bootstrap-vue.js.org/docs/components/collapse/

【讨论】：