Enquire.js изначально не совпадает, только при изменении размера

Question

Я делаю медиа-запросы с Enquire.js и Vue.js. Все это работает, когда я вручную изменяю размер окна браузера. Тем не менее, при загрузке документов у меня нет совпадений, странное поведение, которое наиболее очевидно при включении режима переключателя Chrome или при доступе к сайту с помощью мобильного телефона. Я проверил "Match & Unmatch Example", и он работает как положено в указанном режиме или при доступе к нему с помощью мобильного телефона. Интересно, есть ли какая-то несовместимость между Vue.js и Enquire.js или я что-то не так делаю?

Логика для медиа-запросов находится на готовом крюке моего экземпляра vue:

ready:
    function () {
        var self = this;
        enquire.register("screen and (max-width: 400px)", {
            match: function () {
                self.displayIsLarge = false;
                self.displayIsSmall = true;
            },
            unmatch: function () {
                self.displayIsLarge = true;
                self.displayIsSmall = false;
            }
        })
    );

В моем экземпляре vue у меня есть следующие свойства данных:

var menu = new Vue({
el: '#app',
data: {
    displayIsLarge: true,
    displayIsSmall: false,

В моем HTML-файле я использую v-if="displayIsSmall" а также v-if="displayIsLarge" скрывать / отображать элементы в соответствии с размером браузера. JsdFiddle здесь.

Тем временем мне пришло в голову, что я мог бы решить эту проблему с Setup обратный вызов, возможно, с условным, что-то вроде этого:

enquire.register("screen and (max-width: 400px)", {
    setup: function() {
        if (this.match) {
            self.displayIsSmall = true;
        }
        else {
            self.displayIsSmall = false;
        }
    },
    match: function () {
        self.displayIsLarge = false;
        self.displayIsSmall = true;
    },
    unmatch: function () {
        self.displayIsLarge = true;
        self.displayIsSmall = false;
    }
})

Это не работает, как ожидалось. Что мне не хватает? JsdFiddle здесь.

---

ОБНОВИТЬ

Не повезло ни с Vue beforeCompile, ни с созданными хуками (вместо ready).

Answer 1

unmatch происходит только если вы идете из match в unmatch, Поэтому этого не произойдет, пока вы не уйдете ниже 400 пикселей, а затем вернетесь к нему. Я рекомендую вам сначала воспользоваться мобильным подходом и сделать что-то подобное.

new Vue({
  el: '#app',
  data: {
    displayIsLarge: false,
    displayIsSmall: true
  },
  ready: function () {
    var self = this;
    enquire.register("screen and (min-width: 400px)", {
        match: function () {
            self.displayIsLarge = true;
            self.displayIsSmall = false;
        },
        unmatch: function () {
            self.displayIsLarge = false;
            self.displayIsSmall = true;
        }
    })
  }
})

Вот небольшая демонстрация: https://jsfiddle.net/crswll/uc7gaec0/

Хотя, в зависимости от того, что эти элементы на самом деле содержат и / или делают, возможно, имеет смысл просто визуально переключать их с помощью CSS. Ты же знаешь, что происходит лучше меня.

Answer 2

В дополнение к тому, чтобы я получил match при загрузке страницы, а не только после изменения размера (как подробно описано в ответе выше), мне пришлось добавить <meta> тег viewport в моем index.html, Например, добавление следующего метатега заставит область просмотра масштабироваться до размеров устройства, теперь отображая правильный стиль (т. Е. Мобильный):

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width сделает эквивалентность между шириной страницы и шириной страницы устройства, тогда как initial-scale=1 установит начальный масштаб при загрузке страниц.

Подробнее здесь.