Vue hover effect not triggering updates to the state

Question

Vue hover effect not triggering updates to the state

I have been attempting to attach a v-mouseover directive to a bootstrap Vue component called b-list-group-item in the following code snippet.

<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 in the data determines whether the div will be displayed or not.

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

Despite setting up the action-canvas-register div, it remains hidden even when I hover over the item. The Vue devtool indicates that the data stays unchanged upon mouseover. How can I update the isRegisterHover value based on hovering over the item?

javascript vue.js bootstrap-5

Answer 1

Answer №1

If you prefer, you have the option to achieve this using only CSS. Simply implement the following code:

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

<script>
    ...
</script>

<style>
    #target:hover + div {
        visibility: hidden;  // Hides the element similarly to v-show
        or
        display: none;       // Hides the element in a way similar to v-if
    }
</style>

Answer 2

If you prefer, you have the option to achieve this using only CSS. Simply implement the following code:

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

<script>
    ...
</script>

<style>
    #target:hover + div {
        visibility: hidden;  // Hides the element similarly to v-show
        or
        display: none;       // Hides the element in a way similar to v-if
    }
</style>

Answer 3

Answer №2

Your code seems to be working fine. Check this out:

I suggest using v-show instead of v-if. Take a look here.

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

Answer 4

Your code seems to be working fine. Check this out:

I suggest using v-show instead of v-if. Take a look here.

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

Vue hover effect not triggering updates to the state

Answer №1

Answer №2

Similar questions

Troubleshooting a Global Search Problem with Regular Expressions in Javascript

Is it possible to eliminate duplicate data once it has been retrieved in a modal and used for editing purposes?

When a new entry is added to the database, automatically refresh a <div> section within an HTML document

Guide on automatically opening downloaded files in a new tab in IE 11 or Edge similar to the way file downloads function in Chrome

Tips for incorporating the camera from fbxloader into your three.js scene

What is the best way to retrieve data from a database and display it in a select dropdown list

If the item has an active class, apply a new class to the parent element and all of its

Is there a way to store a SAFEARRAY (an array of bytes) into an HTML hidden field?

Mastering the Implementation of Timetable.js in Angular with TypeScript

Duo and reference loop

Autocomplete with Avatar feature in Material UI TextField

Substitute the value in the object associated with a mystery key with a different value from the second object

Synced Slideshows

Is there a way to modify a specific key value in all embedded objects using Mongoose?

Using Node.js to download and install npm packages from the local hard drive

Unable to properly access required file path through HTML source

How can I only replace every second occurrence in a JS string?

Reactjs Invariant Violation caused by the npm package (react-loader)

Is there a way to switch the alignment of my text to the left side and move the form over to the right side?

The powerful combination of ES6 and sequelize-cli