How to get attribute css of class in Vuejs?

Question

I can't get attribute css of class in Vuejs/nuxtjs in my project.

My class: 'only-small' has attribute: 'display:none' if mediaquery <768.

If this way is impossible, can someone suggest another method to resolve my problem without using window object (window.innerWidth always error if refesh page - window is not defined) and vue-screen plugin

size.vue :

in viewport < 768

<button class="select-btn select-btn--size only-small">
       <span class="select-btn__label"></span>
       <svg class="icon icon--down">
             <use xlink:href="/global.svg#down"></use>
       </svg>
</button>

in viewport >= 768

<div class="select size-select small-font only-large size-select--small">
        <div class="select__headline"></div>
        <div class="select__items no-scrollbar">
            <div>
                <button class="select__label" ></button>
            </div>
        </div>
 </div>

info.vue

<template>
  <div>
    <Size></Size> 
    <AddToCart></AddToCart>
  </div>
</template

scss:

@media screen and (min-width: 768px) {
    .only-small {
        display: none !important;
    }
}

click add to cart with viewport < 768: do some action
click add to cart with viewport > 768: do some other action

When I resize the viewport, no class, element,... is added or removed. Only attribute of css applies.

Are you trying to use viewport size to conditionally apply a class to the element and then select the .only-small elements to hide them? If so, you can use vue-mq (digitalocean.com/community/tutorials/vuejs-vue-media-queries) to help with your conditional rendering. — mirage
– mirage, Commented Dec 29, 2020 at 9:44
thank you very much, but it is not work like vue-screen plugin — Lê Đại
– Lê Đại, Commented Dec 31, 2020 at 6:55

Jacob · Accepted Answer · 2020-12-29 10:23:01Z

1

Actually, i didn't understand exactly what you need. But, if you want to show your elements according to visitor mediaquery you can use v-show directive with a computed property.

<button v-show="mediaQuery" class="select-btn select-btn--size only-small">
   <span class="select-btn__label"></span>
   <svg class="icon icon--down">
         <use xlink:href="/global.svg#down"></use>
   </svg>

<div v-show="!mediaQuery" class="select size-select small-font only-large size-select--small">
    <div class="select__headline"></div>
    <div class="select__items no-scrollbar">
        <div>
            <button class="select__label" ></button>
        </div>
    </div>

data() {
return {
  mediaQuery: true
}

},

 computed: {
checkMedia() {
  if (window.matchMedia('(min-width:768px')) {
    this.mediaQuery = false
  }
},

answered Dec 29, 2020 at 10:23

Jacob

91 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get attribute css of class in Vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related