javascript - Vue.js 切换从父级扩展 v-for 组件

Question

我有一个正在页面上使用的“相册”组件。我正在尝试创建一种在给定时间只能切换一张专辑的东西。因此，如果单击另一个相册时已经打开了一个相册，它将关闭。

组件正在“父”应用程序中递归安装。

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

组件本身。

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

组件本身使用简单的“扩展”数据属性来存储其状态。目前，这意味着当用户打开和关闭每个相册时，该组件可以很好地工作，但是，当他们一次打开多个相册时，就会出现问题。由于绝对定位，我必须手动设置容器的高度。目的是一次只打开一个。我无法想出一种方法来存储和跟踪当前打开的专辑 - 我也不确定家长如何管理每个专辑的阶段/打开和关闭它们的位置。即使我知道父级中打开了哪个相册，我如何触发各个子组件方法？

我已经尽力表达得尽可能清楚，如果还有什么我可以说得更清楚的，请告诉我。

Answer 1

我不太确定递归是什么意思，据我所知，您没有递归地引用专辑组件本身。

我会采用这种方法:expanded 是组件的一个属性。
单击时，组件会发出 this.$emit('expand', albumID)。
在您的父级中，您监听 @expand 事件并将您的 expandedAlbumID 分配给事件负载。
现在剩下的最后一 block 拼图是传递您的 expanded 属性，例如 :expanded="expandedAlbumID == album.id"

完整工作示例:https://codesandbox.io/s/o5p4p45m9