时间戳

首页 > 解决方案 > Vue鼠标悬停不会导致数据更改

javascript - Vue鼠标悬停不会导致数据更改

问题描述

我正在尝试将v-mouseover指令附加到引导 Vue 元素b-list-group-item，如下所示。

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

    <b-col cols="9">
       <div id="action-screen-canvas-register v-if="isRegisterHover"> </div>
    </b-col>
</b-row>

该变量isRegisterHover与数据中的布尔值相关联，该值决定是否显示 div。

export default {
  name: 'Home',
  components: {
    Navi
  },
  data() {
    return {
      isRegisterHover: false,
      // ...
    }
  },
  // ...
}

问题是action-canvas-register当我悬停该项目时 div 仍然隐藏，Vue devtool 还显示当我将鼠标悬停在它们上时数据保持不变。isRegisterHover将鼠标悬停在项目上时如何更改值？

标签： javascriptvue.jsbootstrap-5

解决方案

如果你愿意，你也可以使用纯 CSS 来做到这一点。您可以执行以下操作：

<template>
    <div id="target">Hover this</div>
    <div>...</div>           // This will be hidden when #target is hovered
</template>

<script>
    ...
</script>

<style>
    #target:hover + div {
        visibility: hidden;  // Hides the element like v-show
        or
        display: none;       // Hides the element like v-if
    }
</style>

推荐阅读