在 v-for 中切換自定義音頻播放/暫停按鈕

Question

在我的 vue 應用程序中，我有一個音頻列表，我創建了一個自定義音頻播放/暫停按鈕，

看起來像這樣

<div v-for="(post, p) in post_list">
    ...
    ...
    ...
    <v-avatar v-if="!is_played" color="#663399" size="42" class="mx-2"
        @click="playMe('custom-wave-aud-'+p)">
            <v-icon dark> mdi-play </v-icon>
     </v-avatar> 

     <v-avatar v-if="is_played" color="#663399" size="42" class="mx-2"
        @click="pauseMe('custom-wave-aud-'+p)">
            <v-icon dark> mdi-pause </v-icon>
     </v-avatar> 
</div>

function 看起來像這樣：

playMe(c) {
    document.getElementsByClassName(c)[0].play();
    this.is_played = true;
},
pauseMe(c) {
    document.getElementsByClassName(c)[0].pause();
    this.is_played = false;
},

但是所有音頻的所有播放/暫停按鈕也都被切換，我只希望播放音頻的按鈕應該被切換。

任何想法？

Answer 1

您應該將 v-for 中的代碼拆分為一個名為avatar-item的新組件，例如：

<div v-for="(post, p) in post_list">
    ...
    ...
    ...
    <avatar-item></avatar-item>
</div>

然后你的avatar-item組件將如下所示：

<template>
    <div>
        <v-avatar v-if="!is_played" color="#663399" size="42" class="mx-2"
            @click="playMe('custom-wave-aud-'+p)">
                <v-icon dark> mdi-play </v-icon>
        </v-avatar> 

        <v-avatar v-if="is_played" color="#663399" size="42" class="mx-2"
            @click="pauseMe('custom-wave-aud-'+p)">
                <v-icon dark> mdi-pause </v-icon>
        </v-avatar> 
    </div>
</template>

將變量is_played移動到此組件以及您的其他函數中：

<script>
export default {
    data() {
        return {
            is_played: false,
        }
    },
    methods: {
        playMe(c) {
            document.getElementsByClassName(c)[0].play();
            this.is_played = true;
        },
        pauseMe(c) {
            document.getElementsByClassName(c)[0].pause();
            this.is_played = false;
        },
    }
}

</script>

這樣，每個組件都會有一個獨立的is_played變量，因此應該獨立切換。