javascript - 如何通过“addEventListener”访问“calendarEvents”的数据元素？

Question

我尝试在 nuxtJS 中修改 vuetify 框架的“v-calendar”元素，我需要通过“addEventListener”方法访问“calendarEvents”数据元素，但我不知道如何在那里做到这一点。请帮助解决这个问题。

<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>

标签： javascriptvue.jsvuetify.jsaddeventlistenernuxt.js

Answer 1

您无需在此处尝试利用 DOM，您可以使用日历为您提供的事件。您可以使用以下@mousemove:(day/time/interval)="func"模式：

@mousemove:day="mouseover"