Vue mouseover not causing changes to the data-CodePudding

I am trying to attach a v-mouseover directive to a bootstrap Vue element b-list-group-item as shown below.

<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>

The variable isRegisterHover is tied to the boolean value in the data which determines whether or not the div will be shown.

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

Thing is that the action-canvas-register div remains hidden when I hover the item, Vue devtool also shows that the data remains unchanged when I mouseover them. How do I make the isRegisterHover value change when I mouse-over the item?

CodePudding user response：

Your code should work. See this:

I would recommend using v-show instead of v-if. See this.

<script>
export default {
  data() {
    return {
      isRegisterHover: false
    }
  }
}
</script>

<template>
  <div @mouseover="isRegisterHover = true"
       @mouseleave="isRegisterHover = false">Hover this</div>
  <div v-show="isRegisterHover">This will show/hide (v-show)</div>
  <div v-if="isRegisterHover">This will show/hide (v-if)</div>
</template>

CodePudding user response：

You could also do this with pure CSS if you wanted to. You could do something like:

<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>