Как я могу получить доступ к элементам данных «calendarEvents» через «addEventListener»? - PullRequest
Новая
       12

Как я могу получить доступ к элементам данных «calendarEvents» через «addEventListener»?

0 голосов
/ 06 октября 2019

Я пытаюсь изменить элемент v-calendar в vuetify framework в nuxtJS, и мне нужно получить доступ к элементам данных calendarEvents через метод addEventListener, но я не знаю, как я могу это сделать там. Пожалуйста, помогите решить эту проблему. 

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

1 Ответ

0 голосов
/ 06 октября 2019

Вам не нужно пытаться использовать DOM здесь, вы можете использовать события, которые вам предоставляет календарь. Вы можете использовать шаблон @mousemove:(day/time/interval)="func": 

@mousemove:day="mouseover"
...