如何使用 event.target 为背景着色？

Question

我正在我的应用程序中使用拖放操作，在本例中，我可以将用户拖动到列表中的不同项目。

现在我正在设计 UI 样式，并且想要为项目列表的背景着色，但它实际上不起作用。当我将项目拖过<v-list-item-avatar> 或<v-list-item-title> 列表项目的背景不会改变其颜色。只能拖过去<v-list-item> 。所以它有点麻烦。

我尝试了不同的方法，但没有一个有帮助。如何优化方法以获得预期结果？

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> 

这是我的方法：

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

编辑：下左图显示，将项目拖动到标题上时，列表项的背景没有改变。