@anton_trofimov95

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

А можно ли во 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);
  }


Вроде как нашел такой способ здесь же, но он не работает у меня почему-то
  • Вопрос задан
  • 96 просмотров
Решения вопроса 2
bingo347
@bingo347
Бородатый программер
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));
}
Ответ написан
@anton_trofimov95 Автор вопроса
А нет, заработало вроде
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы