[Vuejs]-Vuejs mobile router-link prevented by v-on:mouseover

by

0👍

✅

I stole the answer here: https://forum.vuejs.org/t/how-to-disable-mouseover-on-mobile/37335

You can disable the mouseover and mouseleave on mobile. Going further you can detect if it’s actually a mobile/tablet using the user agent.

<li
  class="projects-item"
  v-for="project in filteredProjects"
  :key="project.id"
  v-on:mouseover="isMobile ? null : displayHoverInfo($event, project)"
  v-on:mouseleave="isMobile ? null : hover = false"
  >

new Vue({
  el: "#app",

  data: {
    isMobile: false,
    hover: false
  },

  methods: {
    mq() {
        this.isMobile = window.matchMedia('(max-width: 400px)').matches;
    },
    displayHoverInfo($event, project) {
        // your method
    }
  },

  created () {
    // get initial val
    this.mq()
    // listen to resize
    window.addEventListener('resize', this.mq)
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.mq)
  }
})

Leave a comment