Vue.js reference error (event.target) not defined

Question

I have a vue component that has different methods, f.ex. mouseMove:

mouseMove: function(event) {
    console.log("Event is: " + event);
    element5 = event.target
    this.elementMove = element5
    if (element5.getAttribute('data') == 'day') {
        hourPreStart = parseInt(element5.getAttribute('value'))
        dayPreStart = parseInt(element5.parentElement.firstChild.getAttribute('day-value'));
        this.hourPreEnd = hourPreStart
        this.dayPreEnd = dayPreStart
    }
    console.log(this.hourPreStart, this.dayPreStart, this.hourPreEnd, this.dayPreEnd)
},

When I hover over a field with my mouse I get this error:

I don't know what the problem is because event is defined.

Here's the full component. Can someone help me?

Answer 1

event5 is not defined (as the error stares). You have to first define event5 to use it. Use this

mouseMove: function(event) {
    console.log("Event is: " + event);
    let element5 = event.target
    this.elementMove = element5
    if (element5.getAttribute('data') == 'day') {
        let hourPreStart = parseInt(element5.getAttribute('value'))
        let dayPreStart = parseInt(element5.parentElement.firstChild.getAttribute('day-value'));
        this.hourPreEnd = hourPreStart
        this.dayPreEnd = dayPreStart
    }
    console.log(this.hourPreStart, this.dayPreStart, this.hourPreEnd, this.dayPreEnd)
}