VueJS Multiple conditions for style

Question

I'm trying to change the style of my div with class "objectsList". I want to change the style if my SearchFiltersToggle is false AND if in the same time my window is smaller than 1200px.

It works when I just say one condition (!SearchFiltersToggle) but i didn't know how to do this with multiple conditions.

Thanks

<div class="objectsList"
v-bind:style='{
  "display":(!SearchFiltersToggle, window.innerWidth<1200?"flex":"block"),
  }'>
  <div>

Answer 1

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

Answer 2

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