Events 如何在Nuxt.js中正确实现图标链接的悬停效果

我正在尝试在一个使用Nuxt.js和Bootstrap4构建的站点中的组件的图标链接上实现悬停效果。我尝试使用@mouseover/@mouseenter和@mouseleave事件将src属性从一个图标图像切换到另一个图标图像，但除非单击图标链接，否则不会导致更改。这和焦点有关吗？有没有更好的方法来达到我想要的效果？ 组件如下所示

<template>
    <b-row class="main-focus px-3 pt-3">
        <b-col md="12" class="mb-4">
            <h1 class="clr-t mb-4 px-2 pb-1 clr-brdr-btm">resume</h1>
            <p class="drk-t pl-2">{{description[0].text}}</p>
            <b-link 
                @mouseover="icon = 'assets/images/icons/resume-icon-clicked.svg'"
                @mouseleave="icon = 'assets/images/icons/resume-icon.svg'"
                :href="resume.url" 
                target="_blank"
            >
                <b-img 
                    class="icon bg-lt" 
                    v-bind="iconProps" 
                    rounded 
                    :src="icon"/>
            </b-link>
        </b-col>
    </b-row>
</template>
<script>
    export default {
        props: {
            description: Array,
            resume: Object
        },
        data () {
            return {
                icon: 'assets/images/icons/resume-icon.svg',
                iconProps: { width: 100 }
            }
        }
    }

</script>

简历
{{description[0].text}
导出默认值{
道具：{
描述：数组，
简历：对象
},
数据（）{
返回{
图标：“资产/图像/图标/恢复图标.svg”，
iconProps:{宽度：100}
}
}
}

上述行为是因为b-link仅支持中所述的@click事件。 您可以通过在div中包装b-link来实现该功能，如下所示

    <div @mouseover="icon = 'assets/images/icons/resume-icon-clicked.svg'"
@mouseleave="icon = 'assets/images/icons/resume-icon.svg'">
    <b-link 
    :href="resume.url" 
    target="_blank"
    >
    <b-img 
    class="icon bg-lt" 
    v-bind="iconProps" 
    rounded 
    :src="icon"/>
    </b-link>
</div>

---

上述行为是因为b-link仅支持中所述的@click事件。 您可以通过在div中包装b-link来实现该功能，如下所示

    <div @mouseover="icon = 'assets/images/icons/resume-icon-clicked.svg'"
@mouseleave="icon = 'assets/images/icons/resume-icon.svg'">
    <b-link 
    :href="resume.url" 
    target="_blank"
    >
    <b-img 
    class="icon bg-lt" 
    v-bind="iconProps" 
    rounded 
    :src="icon"/>
    </b-link>
</div>