Vue.js toggling expanding v-for component from parent

Question

I've got an 'Album' component that is being used on a page. I am trying to create something whereby only one album can be toggled at a given time. So if an album is already open when clicking another it would close.

Component being mounted recursively in the 'parent' app.

<album v-for="(album, index) in albums"
  :key="index"
  @expand="setAlbumContainerHeight"
  @action="removeFromCollection"
  :albumDetails="album"
  page="collection">
</album>

The component itself.

<template>
    <div v-on:click="toggleExpand" ref="album" class="album">
        <img class="album-artwork" alt="album-artwork" :src="albumDetails.cover_url">
        <div ref="expandContent" class="expanded-content">
            <div class="left-block">
                <div class="title">{{ albumDetails.title }}</div>
                <div class="artist">{{ albumDetails.artist }}</div>

                <!-- Search page specific -->
                <div v-if="page === 'search'" class="info">{{ albumDetails.year }}<br> <span v-for="genre in albumDetails.genre"> {{ genre }}</span><br> {{ albumDetails.label }}</div>
                <!-- Collection page specific -->
                <div v-if="page === 'collection'" class="info">{{ albumDetails.year }}<br> <span v-for="genre in albumDetails.genres"> {{ genre.genre }}</span><br> {{ albumDetails.label }}</div>

                <!-- Search page specific -->
                <button v-if="page === 'search'" v-on:click.stop="addToCollection" class="add-collection">Add to collection</button>
                <!-- Collection page specific -->
                <button v-if="page === 'collection'" v-on:click.stop="removeFromCollection" class="add-collection">Remove from collection</button>
            </div>

            <div v-if="page === 'search'" class="right-block">
                <div class="a-side">
                    <p v-for="track in albumDetails.track_list_one" class="track">{{ track }}</p>
                </div>
                <div class="b-side">
                    <p v-for="track in albumDetails.track_list_two" class="track">{{ track }}</p>
                </div>
            </div>

            <div v-if="page === 'collection'" class="right-block">
                <div class="a-side">
                    <p v-for="track in trackListOne" class="track">{{ track.track }}</p>
                </div>
                <div class="b-side">
                    <p v-for="track in trackListTwo" class="track">{{ track.track }}</p>
                </div>
            </div>

            <img class="faded-album-artwork" alt="faded-album-artwork" :src="albumDetails.cover_url">
        </div>
    </div>
</template>
<script>
    module.exports = {
        name: 'Album',
        props: ['albumDetails', 'page'],

        data: function () {
            return {
                expanded: false,
                expandedContentHeight: 0,
                trackListOne: [],
                trackListTwo: []
            }
        },

        mounted() {
            if (this.albumDetails.tracks) {
                this.getTrackListOne(this.albumDetails.tracks);
                this.getTrackListTwo(this.albumDetails.tracks);
            }
        },

        methods: {
            toggleExpand() {
                if (!this.expanded) {
                    this.expanded = true;
                    this.$refs.expandContent.style.display = 'flex';
                    this.expandedContentHeight = this.$refs.expandContent.clientHeight;
                    let height = this.$refs.album.clientHeight + this.expandedContentHeight;
                    this.$emit('expand', height, event);
                } else {
                    this.expanded = false;
                    this.$refs.expandContent.style.display = 'none';
                    let height = 'initial';
                    this.$emit('expand', height, event);
                }
            },

            addToCollection() {
                this.$emit('action', this.albumDetails.cat_no);
            },

            removeFromCollection() {
                this.$emit('action', this.albumDetails.cat_no);
            },

            getTrackListOne(tracks) {
                let halfWayThough = Math.floor(tracks.length / 2);
                this.trackListOne = tracks.slice(0, halfWayThough);
            },

            getTrackListTwo(tracks) {
                let halfWayThough = Math.floor(tracks.length / 2);
                this.trackListTwo = tracks.slice(halfWayThough, tracks.length);
            },
        },
    }
</script>
<style scoped lang="scss">
    @import './styles/album';
</style>

The component itself is storing its state with a simple 'expanded' data attribute. Currently this means that the component works nicely when a user is opening and closing each album, however, problems occur when they are opening several at a time. Due to absolute positioning I am manually having to set the height of the container. The aim is to have only one open at a time. I am having trouble thinking of a way to store and track what album is currently open - I'm also unsure how the parent can manage the stage each album / open and closing them where. Even if I know which album is open in the parent how can I trigger individual child components methods?

I've tried to be as clear as possible, please let me know if there's anything else I can make clearer.

Answer 1

I'm not quite sure what you mean by recursive, as far as I can see you're not referencing the album component within itself recursively.

I'd go with this approach: expanded is a property of your component.
On a click the component emits a this.$emit('expand', albumID).
In your parent you listen for the @expand event and assign your expandedAlbumID to the event payload.
The last remaining piece of the puzzle is now to pass your expanded property like :expanded="expandedAlbumID == album.id"

Full working example: https://codesandbox.io/s/o5p4p45m9