Question

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>

脚本如下所示：

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' }
            ],
            showSettings: false
        };
    },
    methods: {
        editSettings(item, event) {
            // Only show the clicked items settings, not all
            this.showSettings = !showSettings;
        }
    }
}

只显示所点击项目的设置面板，最简单，最干净的方法是什么？现在，如果我点击Click Me设置，则会打开所有设置。代码中列出的data仅作为示例，但来自API，因此我与操作数据无关。

任何人都可以帮助我朝着正确的方向前进吗？

Answer 1

而不是使用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>

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

访问v-for中的兄弟元素

1 个答案: