I am currently trying to customize the "v-calendar" element within the vuetify framework in nuxtJS. My goal is to access the data elements of "calendarEvents" through the use of the "addEventListener" method. However, I am facing difficulties in achieving this. Any assistance in solving this issue would be greatly appreciated.
<template>
<v-sheet height="300" class="pt-3">
<v-calendar
type="month"
now="2019-01-08"
value="2019-01-08"
event-color="blue"
:event-margin-bottom="3"
:events="events"
></v-calendar>
</v-sheet>
</template>
<script>
export default {
data: () => ({
calendarEvents: [
{
name: 'Vacation',
start: '2019-01-15'
},
{
name: 'Meeting',
start: '2019-01-07',
},
{
name: '30th Birthday',
start: '2019-01-03',
},
{
name: 'Conference',
start: '2019-01-21',
}
],
}),
mounted(){
let elements = document.querySelectorAll('.v-event.v-event-start.v-event-end.blue.white--text > div')
elements.forEach(item => {
item.addEventListener('mouseover', (e) => {
console.log(e)
this.mouseover(e)})
})
},
directives: {
maybeDoThis:{
inserted: (el, binding, vnode, oldVnode) => {
console.log(el)
console.log(binding)
}}
},
methods: {
mouseover: (ev) => {
console.log(ev) // ev.target.value don't work here
}
}
}
</script>