CODEWITHSUNDEEP
vue.jsvuejs3
Dave
Dave

Reputation: 2018

Mouseover function wont toggle

I am trying to change the hover value on hover, but it doesn't seem to work whenever I hover over the flex element, what am I doing wrong?

html

template(#default="{ toggle, toggled, hover }")
  .flex(@click="toggle" @mouseover="hover = !hover" )

    box-icon(type="solid" name="chevron-down" v-if="hover")

component

<template lang="pug">
slot(:toggled="toggled" :toggle="toggle" :hover="hover")
</template>

<script>
  import { ref } from 'vue'
    export default {
    setup() {
      const toggled = ref(false)
      const hover = ref(false)
      function toggle() {
        toggled.value = !toggled.value
      }
      
      return { toggled, toggle, hover }
    }
  }
</script>

Upvotes: 1

Views: 800

Answers (1)

Benjamin Fourgeaud
Benjamin Fourgeaud

Reputation: 864

@mouseover is not an event in vuejs.
You will have to use @mouseenter and @mouseleave.

Also it seems like you cannot edit a ref value, you will have to create a function in your template that changes that value. That is something I cannot explain myself right now. Nevertheless I made it work.

Here is a working example :

// Test.vue component
<script setup>
  const toggled = ref(false)
  const hovered = ref(false)
  const hover = (value) => hovered.value = value
  const toggle = () => toggled.value = ! toggled.value
</script>

<template>
  <slot :toggled="toggled" :toggle="toggle" :hovered="hovered" :hover="hover" />
</template>

<Test>
  <template #default="{toggle, toggled, hover, hovered}">
    <button @click="toggle" @mouseenter="hover(true)" @mouseleave="hover(false)">
      <p>Toggled : {{ toggled }}</p>
      <p>Hovered : {{ hovered }}</p>
    </button>
  </template>
</Test>

Upvotes: 1

Related Questions