Vue Binding Value Based on Media Query

vue binding value based on media query

You could try binding the display value to a component property:

<carousel-3d :display="display">

...and then update that property on window resize:

...

data() {
  return {
    display: 3
  }
},

methods: {
  onResize() {
    if (window.innerWidth > 960) {
      this.display = 5
    } else {
      this.display = 3
    }
  }
},

created() {
  window.addEventListener('resize', this.onResize)
},

beforeDestroy() {
  window.removeEventListener('resize', this.onResize)
},

...

vue binding value based on media query

You could try binding the display value to a component property:

<carousel-3d :display="display">

...and then update that property on window resize:

...

data() {
  return {
    display: 3
  }
},

methods: {
  onResize() {
    if (window.innerWidth > 960) {
      this.display = 5
    } else {
      this.display = 3
    }
  }
},

created() {
  window.addEventListener('resize', this.onResize)
},

beforeDestroy() {
  window.removeEventListener('resize', this.onResize)
},

...

Using Media Querys with dynamic Properties in Vue

Are your assets included in the build output? If so you should let Webpack deal with creating the paths instead of hardcoding them.

If that's not an option you can take a look at CSS image-set which is a way to define responsive images outside of media queries. However, browser support isn't great.

Finally, you can use the srcset attribute in HTML and then hide/show the element based on media queries.

-- Edit:

I forgot that you can actually bind styles in the VUE.js template.
v-bind:style Here's an example. This is actually changing the style block that gets compiled on build. It's not an inline "computed" style.

-- Edit #2

Use VUE to set a CSS Variable --backgroundImage this can then be used inside the media queries in your CSS. Someone made a great Codepen example.

CSS

:root {
  --backgroundImage: 'blank.png';
}

div {
  background-image: var(--backgroundImage);
}

VUE

watch: {
    img(val){
    element.style.setProperty('--backgroundImage', val)
    }
}

I want to change Vue components with media Queries

You do not want to use CSS to hide. The beauty of Vue is that in the case of mobile, the code will not even be generated at all.

Use a v-if directive, and add an isMobile property to your data, computed, store, etc. Or call a method to get it.

<app-footer v-if='!isMobile'></app-footer>

For the header, there are 2 ways. Using a component element with v-bind:is to swap in the correct one, or using v-if and v-else

<app-header v-if='!isMobile'></app-header>
<app-header-mobile v-else></app-header-mobile>

Here is the official link to the Vue dynamic component approach.
https://v2.vuejs.org/v2/guide/components-dynamic-async.html.

It would look like this:

 <component v-bind:is="currentHeaderComponent"></component>

In this case, you would set currentHeaderComponent based on your conditions.

If you insist on CSS and media queries for the footer, set the component id or class, and that in your CSS

Component

<app-header id='app-header'></app-header>
<router-view></router-view>
<app-footer id='app-footer'></app-footer>

CSS

#app-footer {display: none;}

How to change vue.js data value when screen size changes?

Check this library : https://github.com/apertureless/vue-breakpoints

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <hide-at breakpoint="medium">
        <template v-if="mobile == 1">
            <li><a href="#">Heading</a></li>
        </template>
        </hide-at>
        <!-- Else use long heading -->
        <show-at breakpoint="mediumAndAbove">
        <template v-else-if="mobile == 0">
            <li><a href="#">Heading Long</a></li>
        </template>
        </show-at>
    </ul>
</div>

or simply go with media queries (https://www.w3schools.com/css/css3_mediaqueries_ex.asp)

CSS :

@media screen and (max-width: 600px) {
    #app ul il:first-of-type {
        visibility: visible;
    }
    #app ul il:last-of-type {
        visibility: hidden;
    }
}

@media screen and (max-width: 992px) {
    #app ul il:first-of-type {
        visibility: hidden;
    }
    #app ul il:last-of-type {
        visibility: visible;
    }
}

ofcourse it's up to you to decide what to show and what to hide on what breakpoint , i hope this helps.

Vue style (background-image) binding not reactive

It's not working because of the semicolons you put at the end of url() directives, css rules set in object notation with Vue don't require semicolons :)

---

Related Topics