CODEWITHSUNDEEP
javascriptcssvue.jsclassnuxt.js
Lê Đại
Lê Đại

Reputation: 1

How to get attribute css of class in Vuejs?

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;
    }
}
  1. click add to cart with viewport < 768: do some action
  2. 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.

Upvotes: 0

Views: 368

Answers (1)

Jacob
Jacob

Reputation: 9

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
  }
},

Upvotes: 1

Related Questions