CODEWITHSUNDEEP
vue.js
Alphy Gacheru
Alphy Gacheru

Reputation: 657

How to emit event in Vue.js depending on the width of the screen

I've got the following code from my sidebar. When any link is clicked, I'm also emitting an event to my root component and then invoking a function to hide the sidebar. This is working well but now I would like the event to be emitted only when the width of the screen is less than 768px so that I can emit the event only when I want to invoke the function.

 <div class="side-links">
      <ul>
        <li>
          <router-link @click="$emit('navLinkClicked')" :to="{ name: 'Home' }"
            >Home</router-link
          >
        </li>
        <li>
          <router-link @click="$emit('navLinkClicked')" :to="{ name: 'Blog' }"
            >Blog</router-link
          >
        </li>

        <li>
          <router-link @click="$emit('navLinkClicked')" :to="{ name: 'About' }"
            >About</router-link
          >
        </li>
      </ul>
    </div>

Upvotes: 0

Views: 426

Answers (1)

Lars
Lars

Reputation: 788

You can use window.innerWidth to check the width of the current viewport. Global scope variables however is not available in the template, because its scoped to your component. You can either create a handler method:

<script>
  methods: {
    onNavLinkClicked() {
      if (window.innerWidth < 768) {
        this.$emit('navLinkClicked')
      }
    }
  }
</script>
<template>
  <div class="side-links">
    <ul>
      <li>
        <router-link
          @click="onNavLinkClicked"
          :to="{ name: 'Home' }"
        >
          Home
        </router-link
      </li>
    </ul>
  </div>
</template>

or create a computed variable that defines if the width is below the treshold:

<script>
  computed: {
    isMobile() {
      return window.innerWidth < 768;
    }
  }
</script>
<template>
  <div class="side-links">
    <ul>
      <li>
        <router-link
          @click="isMobile ? $emit('navLinkClicked') : null"
          :to="{ name: 'Home' }"
        >
          Home
        </router-link
      </li>
    </ul>
  </div>
</template>

Personally i'd go with the first option, so you'll only have to do the check once.

In Vue 2 it is also recommended to use kebab-case for event names.

Upvotes: 4

Related Questions