Vue中b-list-group-item绑定mouseover事件无法修改data数据如何解决？

解决方法 #

1. 给自定义组件的原生事件添加.native修饰符（适用于Vue2环境）
   b-list-group-item是Bootstrap Vue封装的自定义组件，默认@mouseover监听的是组件主动抛出的自定义事件，组件未抛出对应事件时不会触发。要监听组件根元素的原生鼠标事件，需要添加.native修饰符：

<b-list-group-item :active="register"
  @click="switchRegister" button 
  @mouseover.native="isRegisterHover = true"
  @mouseleave.native="isRegisterHover = false"
  class="border-0 bg-transparent register"> Register </b-list-group-item>

2. 修复模板语法错误
   你代码中控制显示的div的id属性缺少闭合引号，会导致模板解析异常，影响v-if判断逻辑，修正后代码如下：

<div id="action-screen-canvas-register" v-if="isRegisterHover"> </div>

额外优化建议：可以将@mouseover替换为@mouseenter，后者不会触发事件冒泡，更适合单个元素的悬浮判断场景。如果使用的是Vue3对应版本的Bootstrap Vue Next，.native修饰符已被移除，直接绑定原生事件即可生效。

内容的提问来源于stack exchange，提问作者CorvusRex