Estoy trabajando con arrastrar y soltar en mi aplicación, en este caso puedo arrastrar usuarios a diferentes proyectos en una lista.

Ahora estoy diseñando la interfaz de usuario y quiero colorear el fondo de mi lista de elementos, pero en realidad no funciona. Cuando arrastro el elemento sobre <v-list-item-avatar> o <v-list-item-title> , el fondo del elemento de lista no cambia de color. Solo arrastrando sobre <v-list-item> . Así que es un poco buggy.

Probé diferentes enfoques, pero ninguno de ellos fue útil. ¿Cómo puedo optimizar el enfoque para obtener el resultado esperado?

Fragmento de Vue:

 <v-list-item-group v-model="selectedProjectItem"> <v-list-item @drop='onDrop($event, project)' @dragover.prevent @dragenter.prevent @dragenter="dragenter($event)" @dragleave="clearDrag($event)" v-for="(project, index) in visibleProjects" :key="project.id" link @click="emitAllUsers(project, index)" class="projectItemSize project" id="projectlist" > <v-list-item-avatar size="35" class="avatar"> <v-img v-bind:src="returnImage(project,project.image)" /> </v-list-item-avatar> <v-list-item-title class="project"> {{ project.name }} </v-list-item-title> </v-list-item> </v-list-item-group>

Y este es mi método:

 dragenter (evt) { const event = evt.target if (event.id === 'projectlist') { event.style.background = '#0061ff' event.style.color = 'white' } }

EDITAR: La imagen de la izquierda a continuación muestra que el fondo del elemento de la lista no ha cambiado al arrastrar el elemento sobre el título.