TypeError：无法读取未定义的属性 - 在 v-if (vue3) 中使用导入组件的 ref 属性

Question

我正在尝试将音频播放器集成到 vue3 网站中。我打算使用的组件是这个Link。

我尝试创建一个播放/暂停按钮，可以将其放置在网站上的任何位置（与播放器分开）。我使用 v-if 来切换按钮显示的内容（取决于是否播放声音），并使用我从播放器获得的“isPlaying”属性。

我现在遇到的问题是，当我加载页面时，这是由下面第 2 行引起的：“!this.$refs.audioPlayer.isPlaying”

TypeError: Cannot read properties of undefined (reading 'isPlaying')

到目前为止，我的理解是，当组件渲染时，ref 还不可用，这会导致问题。我尝试使用不同的方法（安装、观察者、设置..），但我总是用头撞墙。

任何有关如何正确解决此问题的指示将不胜感激。

有趣的是：当我在加载页面时将“！this.$refs.audioPlayer.isPlaying”简单地更改为“true”，然后在加载页面时再次将“true”替换为“！this.$refs.audioPlayer.isPlaying”页面已经加载，我可以看到按钮正常工作..

非常感谢！

<template>
  <div v-if="!this.$refs.audioPlayer.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="audioList.map(elm => elm.url)"
      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">

export default {
  data() {
    return { audioList: [{ name: 'audio1', url: 'rock.mp3'}]}
  },
}
</script>

我在 main.ts 中导入的 AudioPlayer：

import AudioPlayer from '@liripeng/vue-audio-player'
app.use(AudioPlayer);

Answer 1

你是对的，当 v-if 执行时，

$refs.audioPlayer

不可用，因此它会立即产生错误。在尝试检查

&&

属性之前，您可以尝试在 v-if 中使用

this.$refs.audioPlayer

来检查

isPlaying

是否为真。

<div v-if="this.$refs.audioPlayer && !this.$refs.audioPlayer.isPlaying"

可以通过可选链接将其缩短为

<div v-if="!this.$refs.audioPlayer?.isPlaying"