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>

Answer 1

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

@mousemove:day="mouseover"

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

1 个答案: