vue3 - 计算状态中的动态引用 // 在表中重复播放器 n 次并具有播放/暂停按钮

Question

在下面的 vue3 页面上，我集成了一个播放器，当播放器停止时显示“播放”图标，在播放时显示“暂停”图标。

我现在想做的是通过将其包含在表格中来让玩家重复n次。

我遇到的困难是，我目前使用下面的播放器（“audioPlayer”）的“ref”作为“计算”的输入，因为当我重复播放器n次时，我无法对播放器的参考，我需要找到一种如何为相应行中的音频播放器动态评估“isPlaying”的方法。

我尝试使用方法、高阶函数（如here所解释）但一直无法弄清楚。

如有任何指点，我们将不胜感激。

谢谢你

P.s.下面的例子有效；缺少的是将播放器固定在重复中，因为我无法弄清楚如何根据我所在的行正确计算 isPlaying

<template>
  <div v-for="index in 3" :key="index"> 
    {{ index }}. player should go here <p></p> <!-- <<<<<<<<< The player below should be repeated here -->
    ----------------------------------
  </div>

  <div v-if="!isPlaying" class="audio__play-start"  @click.stop="this.$refs.audioPlayer.play"><q-icon name="play_circle"></q-icon></div>
  <div v-else class="audio__play-pause" @click.stop="this.$refs.audioPlayer.pause"><q-icon name="pause_circle"></q-icon></div>
  
  <div>
    <audio-player
      ref="audioPlayer"
      :audio-list="['./api/soundfiles?path=/tmp&filename=rock.mp3']"
      theme-color="black"
      :show-prev-button="false"
      :show-next-button="false"
      :show-play-button="false"
      :show-volume-button="false"
      :show-playback-rate="false"
    />
  </div>
</template>

<script lang="ts">
import { ref, computed } from 'vue';

export default {
  
  setup () {
    const audioPlayer =  ref(Object)
    const isPlaying = computed(() => {  
      return audioPlayer.value.isPlaying
    })

    return {
      audioPlayer,
      isPlaying
    }
  },

}
</script>

Answer 1

<template>
  <div v-for="index in 3" :key="index"> 
    {{ index }}. player should go here <p></p> <!-- <<<<<<<<< The player below should be repeated here -->
    ----------------------------------
  </div>

  <div v-if="!isPlaying[index]" class="audio__play-start"  @click.stop="playerRefs[index].play(),isPlaying[index]=true"><q-icon name="play_circle"></q-icon></div>
  <div v-else class="audio__play-pause" @click.stop="playerRefs[index].pause(),isPlaying[index]=false"><q-icon name="pause_circle"></q-icon></div>
  <div>
    <audio-player
      :ref="(el)=>setPlayerRef(el, index)"
      :audio-list="['./api/soundfiles?path=/tmp&filename=rock.mp3']"
      theme-color="black"
      :show-prev-button="false"
      :show-next-button="false"
      :show-play-button="false"
      :show-volume-button="false"
      :show-playback-rate="false"
    />
  </div>
</template>

<script lang="ts">
import { ref, computed } from 'vue';

export default {
  
  setup () {
  const playerRefs= {}
  const setPlayerRef = (el, key) => {
     if (el) {
        playerRefs[key] = el
      }
   }

    const isPlaying = ref({1:false,2:false,3:false})
    return {
      isPlaying,
      setPlayerRef,
      playerRefs
    }
  },

}
</script>