[Vuejs]-VueJS Multiple conditions for style

by

0👍

try

"display": (!SearchFiltersToggle && window.innerWidth < 1200) ? "flex" :"block",

you can use plain js syntax in the directives, because it’s essentially what it is.
you might also need to replace window.innerWidth with some kind of a getter defined inside your component, I’m not sure if you can access window object from a directive

0👍

If "display":(!SearchFiltersToggle && window.innerWidth < 1200 ? "flex" : "block"), doesn’t work, you can use a computed method like :

<div class="objectsList"
     v-bind:style='{isTrue ? "flex" : "block" }'>
<div>

<script>
export default {
  computed: {
    isTrue: function () {
      return !SearchFiltersToggle && window.innerWidth < 1200;
    }
  }
}

Leave a comment