Question

我有一个v-for循环，当点击该循环中的项目时，我想隐藏div＃one并显示div＃two。然后单击div＃2中的按钮隐藏并再次显示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

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

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

在v-for list items中显示和隐藏div（Vue.js 2）

2 个答案: