OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

v-if - condition based on screen size

  • Thread starter Thread starter Dart
  • Start date Start date
D

Dart

Guest
im trying to use v-if to render 2 buttons in different containers on page, depending on screen size is there way how to change parent of items in @media or way how to use screen size in v-if condition?

i tried

Code:
<div v-if="window.innerWidth < 860">
<!-- Some code -->
</div>

but it throws me "TypeError: Cannot read properties of undefined (reading 'innerWidth')"

(when i use just media query, there appears bug with radio btns, when they needs 2 clicks to get :checked styles) when i tried @media, in fact there was 4 buttons, that binded to 2 variables

Code:
<!-- button code -->
<label>
  <input type="radio" name="month-season" id="month" value="month" v-model="monthSeason">
  <null-button>
     <img src="../assets/green-smile.png" alt="#" id="month-icon">
     text
  </null-button>
</label>


<!-- null-button -->
<div class="parent">
  <div class="container">
    <slot></slot>
  </div>
<div>

<!-- styles for button -->
<style>
    .month-season {
        text-align: right;

        label {
            .container {
                color: rgba(45, 206, 137, 1);
                background: white;
                img {
                    margin: 0 4px 0 0;
                }
            }
            input:checked + .parent .container {
                background: rgba(45, 206, 137, 1);
                color: white;
                img {
                    filter: brightness(1000%);
                }
            }
            input {
                appearance: none;
            }
        }
    }
</style>

Error message when I use window.innerWidth
when using window.innerWidth

<p>im trying to use v-if to render 2 buttons in different containers on page, depending on screen size
is there way how to change parent of items in @media or way how to use screen size in v-if condition?</p>
<p>i tried</p>
<pre><code><div v-if="window.innerWidth < 860">
<!-- Some code -->
</div>
</code></pre>
<p>but it throws me "TypeError: Cannot read properties of undefined (reading 'innerWidth')"</p>
<p>(when i use just media query, there appears bug with radio btns, when they needs 2 clicks to get :checked styles)
when i tried @media, in fact there was 4 buttons, that binded to 2 variables</p>
<pre><code><!-- button code -->
<label>
<input type="radio" name="month-season" id="month" value="month" v-model="monthSeason">
<null-button>
<img src="../assets/green-smile.png" alt="#" id="month-icon">
text
</null-button>
</label>


<!-- null-button -->
<div class="parent">
<div class="container">
<slot></slot>
</div>
<div>

<!-- styles for button -->
<style>
.month-season {
text-align: right;

label {
.container {
color: rgba(45, 206, 137, 1);
background: white;
img {
margin: 0 4px 0 0;
}
}
input:checked + .parent .container {
background: rgba(45, 206, 137, 1);
color: white;
img {
filter: brightness(1000%);
}
}
input {
appearance: none;
}
}
}
</style>
</code></pre>
<p>Error message when I use <code>window.innerWidth</code>
<img src="https://i.sstatic.net/txCVE.png" alt="when using window.innerWidth" /></p>
Continue reading...
 

Latest posts

Online statistics

Members online
0
Guests online
6
Total visitors
6
Top