Accessing siblings elements in a v-for

Question

New to Vuejs 2, need a bit of help to understand how this would be done.

So, I have a template that looks like the following:

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

The scripts looks like this:

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;
        }
    }
}

What is the easiest and cleanest approach to only showing the settings panel for the clicked item? Right now, if I click the Click Me settings, all settings open up. The data listed in the code is only there for example, but is coming from an API so I don't have much to do with the manipulation of that data.

Can anyone help lead me in the right direction?

Answer 1

Instead of using showSettings add a 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
      }  
    }
}

And modify your template to set the selectedItem when the item is clicked and show the settings only if the selectedItem is the current item.

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

The above will show the settings for the clicked item if the currently selected item is not the item that was clicked. If the currently selected item is the one that was clicked, it will hide the settings.