Задать в Vue условие в зависимости от разрешения экрана?

Question

[anton_trofimov95]

А можно ли во Vue как-то задать условие, что, например

<div class="header__item mobile-menu" v-if="showMobileMenu">

вот это применялось только для разрешений менее 768px, а более, то условия как-будто и не было.
в data() showMobileMenu: false

data() {
    return {
      showMobileMenu: false
    };
  },
  methods: {
    onResize() {
      this.showMobileMenu =
        document.documentElement.clientWidth > 768 ? false : true;
    }
  },
  created() {
    if (process.browser) {
      window.addEventListener("resize", this.onResize);
      this.onResize();
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  }

Вроде как нашел такой способ здесь же, но он не работает у меня почему-то

Comments

[anton_trofimov95]

А нет, заработало вроде

Answer 1

[Дмитрий Беляев]

data() {
    return {
        showMobileMenu: false
    };
},
mounted() {
    const mediaQuery = window.matchMedia("(min-width:768px)");
    this.showMobileMenu = mediaQuery.matches;
    const listener = e => this.showMobileMenu = e.matches;
    mediaQuery.addListener(listener);
    this.$once('hook:beforeDestroy', () => mediaQuery.removeListener(listener));
}

Comments

[anton_trofimov95]

На разрешениях свыше 768 компонент должен быть виден

[anton_trofimov95]

Исправил на min-width: 769 и все стало как надо

[Дмитрий Беляев]

anton_trofimov95, да, скорее всего я не правильно понял Ваш вопрос и как следствие не правильно составил медиа запрос