Check if v-dialog is open and stop audio playing

Question

I would like have a watcher on the v-dialog to stop audio files playing when the dialog is open. Usually I would have v-model="dialogVisible" and then add a watch. But as I have multiple dialogs I have had to use a v-model="media.show" for the dialog.

 this.audioPlayer.pause()
 this.isPlaying = false

How can I now check for when the dialog is open and then set the above to prevent audio files playing while a dialog is open?

<v-list-item-action>
            <div v-if="media.url.includes('mp3')">
              <v-btn
                v-if="isPlaying && (currentMedia.id === media.id)"
                icon
                @click="pause"
              >
                <v-icon>pause</v-icon>
              </v-btn>
              <v-btn
                v-else
                icon
                @click="play(media)"
              >
                <v-icon>play_arrow</v-icon>
              </v-btn>
            </div>
            <div v-else>
              <v-dialog
                v-model="media.show"
                persistent
                width="800px"
                :retain-focus="false"
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    icon
                    v-bind="attrs"
                    v-on="on"
                  >
                    <v-icon>mdi-open-in-new</v-icon>
                  </v-btn>
                </template>
                <v-card>
                  <Video
                    v-if="media.show"
                    :video-url="media.url"
                  />
                </v-card>
                <v-card-actions>
                  <v-spacer />
                  <v-btn
                    color="primary"
                    text
                    @click="media.show = false"
                  >
                    Close
                  </v-btn>
                </v-card-actions>
              </v-dialog>
            </div>
          </v-list-item-action>

Answer 1

What you can do is watch for a specific prop change. In your case media.show. When it changes this triggers your dialog to show. So when you are watching that prop to change you can trigger a function that you can do anything with. In this case we will pause the music when the value becomes true and resume it becomes false.

watch: {
    media: {
        deep: true,
        handler(newVal) {
            //Modal is displayed
            if (newval.show) {
                this.audioPlayer.pause()
                this.isPlaying = false
            } else {
                //Resume when modal is closed (optional(
                this.audioPlayer.play();
                this.isPlaying = true;
            }
        }
    }
}