Encountering an issue
Seeking assistance with identifying my mistake. Attempting to create reusable components, starting with a button for example. I have created it in the file path: /components/MusicPlayer.vue:
<template>
<div>
<v-btn @click="playMusic">
I am a button
</v-btn>
</div>
</template>
<script>
export default {
data () {
return {
test: require('@/assets/YES.mp3')
}
},
methods: {
playMusic () {
const pav = new Audio(this.test)
pav.play()
}
}
}
</script>
<style>
#MusicPlayer{
background: red;
}
</style>
Afterwards, when attempting to import and export as necessary in my Layout path /layouts/LoggedIn.vue:
<template>
<v-app id="Logged-In-Layout">
<transition
name="view"
>
<router-view />
</transition>
... <- some code -> ...
</v-app-bar>
<v-btn id="scroll-to-top-btn" fab color="pink" @click="scrollToTop">
<v-icon>mdi-arrow-up-bold-outline</v-icon>
</v-btn>
<Player id="ricardo" /> <--- my custom component here.
</v-app>
</template>
<script>
import { MusicPlayer } from '@/components/MusicPlayer.vue'
export default {
components: {
Player: MusicPlayer
},
data: () => ({
dialog: false,
drawer: false
}),
methods: {
scrollToTop () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
})
}
}
}
</script>
Whether using Player: MusicPlayer, 'otherName': MusicPlayer, or just MusicPlayer, the functionality does not work. Additionally, the button which should be visible is sized at 0x0 px. Attempted enclosing it in a
<div> <Player /> </div>