Is it possible to activate multiple music notes when hovering over one? For example, if I hover over music note 2, both note 1 and note 2 should get active classes. And if I hover over note 3, then all three spans/icons should become active.
I have successfully implemented this feature with a click event. How can I achieve the same functionality with a hover event?
This is the code snippet I am currently using:
<template>
<div class="track-rating">
<span :key="note" v-for="note in maxNotes" :class="{ 'active': note <= notes }" @click="rate(note)" class="material-icons mr-1">
audiotrack
</span>
</div>
</template>
<script>
export default {
name: "Rating",
props: {
rating: {
type: Number,
required: true
},
maxNotes: {
type: Number,
default: 3
},
hasCounter: {
type: Boolean,
default: true
}
},
data() {
return {
notes: this.rating
};
},
methods: {
rate(note) {
if (typeof note === 'number' && note <= this.maxNotes && note >= 0)
this.notes = this.notes === note ? note - 1 : note
}
}
};
</script>
================
<template>
<div>
<Rating :rating="0"/>
</div>
</template>
<script>
import Rating from '../Rating';
export default {
name: "Test",
components: {
Rating
},
};
</script>