CODEWITHSUNDEEP
vue.js
Inphyy
Inphyy

Reputation: 69

Calculate screen size with Vue.js

I am trying to get the screen size with Vue

I have this until now, but nothing works for me now

data: () => ({
WindowsSize: '',
 methods: {

 elem() {
  this.size = window.innerWidth;
  return this.size;
 },
 mounted() {
  if (this.elem < 767){ //some code }
  }
 })

the goal is that with a my div show and hide elements

<div v-if="WindowsSize== ''" />

some way to get am, searching the web hasn't worked for me so far

Upvotes: 0

Views: 718

Answers (1)

tony19
tony19

Reputation: 138226

It sounds like you're trying to show/hide elements based on screen width. That could be done more simply with CSS media queries:

<template>
  <div class="large">...</div>
</template>

<style>
/* hide by default */
.large {
  display: none;
}

/* show when screen is at least 600px wide */
@media (min-width: 600px) {
  .large {
    display: block;
  }
}
</style>

demo

Upvotes: 2

Related Questions