Vue.js 访问v-for中的同级元素

Vuejs 2新手，需要一些帮助来了解如何做到这一点

因此，我有一个如下所示的模板：

<template>
    <div class="wrapper">
        <div class="item" v-for="item in items">
            <div class="item">
                <div class="title">{{ item.title }}</div>
                <div class="action">
                    <a href="#" @click.prevent="editSettings(item, $event)">
                        Click Me
                    </a>
                </div>
            </div>
            <div v-if="showSettings" class="settings">
                <!-- Settings component for this item. -->
                <settings-panel item="item"></settings-panel>
            </div>
        </div>
    </div>
</template>

仅显示所单击项目的“设置”面板的最简单、最干净的方法是什么？现在，如果我单击

单击我

设置，所有设置都会打开。例如，代码中列出的

数据

仅在那里，但它来自一个API，因此我对该数据的操作没有太大的影响

---

有人能帮我找到正确的方向吗？

不要使用

showSettings

添加

selectedItem

export default {
    data() {
        return {
            items: [
                // This data is from an API usually and only
                // shown here for example purposes
                { id: 1, title: 'Title 1' },
                { id: 2, title: 'Title 2' },
                { id: 3, title: 'Title 3' },
                { id: 4, title: 'Title 4' }
            ],
            selectedItem: null
        };
    },
    methods:{
      selectItem(item){
        if (this.selectedItem === item) this.selectedItem = null
        else this.selectedItem = item
      }  
    }
}

并修改模板，以便在单击项目时设置

selectedItem

，并且仅当

selectedItem

是当前项目时才显示设置

<template>
    <div class="wrapper">
        <div class="item" v-for="item in items">
            <div class="item">
                <div class="title">{{ item.title }}</div>
                <div class="action">
                    <a href="#" @click.prevent="selectItem(item)">
                        Click Me
                    </a>
                </div>
            </div>
            <div v-if="selectedItem === item" class="settings">
                <!-- Settings component for this item. -->
                <settings-panel item="item"></settings-panel>
            </div>
        </div>
    </div>
</template>

{{item.title}

---

如果当前选定的项目不是已单击的项目，则上面将显示已单击项目的设置。如果当前选择的项目是单击的项目，则会隐藏设置。

快速回答！谢谢我需要它切换，但这将引导我在正确的方向完成@肖恩更新为切换。有很多方法可以做到这一点。这是快速和简单的。让我们说，我有一个单独的职位和职位组成部分，将生成许多职位的v-for；有没有一种方法可以访问帖子的兄弟姐妹以及当点击其中一个隐藏其他帖子的“设置”时？（该组件中的节点），类似于vuetify展开或经典手风琴..@user348078当然。我可能仍然会让Posts组件设置状态，但是您可以将所选Post从Post自身发送到Posts组件，然后在Post等于所选Post时设置一些属性（可见、选中，无论什么）。嗯，但是在我的Post中，我所拥有的只是。那么如何设置wich post使其v卡（设置）可见？通过传递带有当前选定帖子的道具？

<template>
    <div class="wrapper">
        <div class="item" v-for="item in items">
            <div class="item">
                <div class="title">{{ item.title }}</div>
                <div class="action">
                    <a href="#" @click.prevent="selectItem(item)">
                        Click Me
                    </a>
                </div>
            </div>
            <div v-if="selectedItem === item" class="settings">
                <!-- Settings component for this item. -->
                <settings-panel item="item"></settings-panel>
            </div>
        </div>
    </div>
</template>