Вычисляемое свойство с функцией matchMedia Vue.js - PullRequest
Новая
       66

Вычисляемое свойство с функцией matchMedia Vue.js

0 голосов
/ 30 октября 2019

У меня возникла проблема с функцией matchMedia, которую я написал в своем вычисляемом свойстве в Vue. Проблема в том, что когда я загружаю / обновляю страницу, функция не работает. Он вернулся к работе только после того, как я изменил размер экрана в режиме адаптивного дизайна в браузере.

Здесь код моего app.js 

     computed: {
        widthChange() {
            if (matchMedia) {
                    var mqT = window.matchMedia(" (max-width: 850px) and (min-width: 600px) ")

                    function changeWidthT(mqT) {
                    const sectionRight = document.querySelector(".section-right")
                    if (mqT.matches) {
                        sectionRight.classList.remove("col-7")
                    }
                    else {
                        sectionRight.classList.add("col-7")
                    }
                }

                mqT.addListener(changeWidthT)
            }
        }
    },

, и я вызываю свойство computed внутри родительского объекта. страницы 

<div class="frontpage-parent" :class="widthChange">...
</div>

Ответы [ 2 ]

0 голосов
/ 30 октября 2019

Вы неправильно используете computed свойства здесь. Предполагается, что они являются получателями, что означает, что они должны только возвращать готовые к иску значения. Вы на самом деле подключаете там прослушиватели событий.

Вместо этого вам нужно использовать атрибут данных и инициализировать своих слушателей в подключенном хуке: 

export default {
  name: 'Blah',
  data () {
    const tabletViewQuery = matchMedia('...')
    return {
      tabletViewQuery: tabletViewQuery.
      tabletView: tableViewQuery.matches,
    }  
  },
  mounted () {
     this.tabletViewQuery.addListener(() => {
       this.tabletView = tableViewQuery.matches
     }
  }
}

и использовать его в таблице: 

<div class="section-right" :class="{ 'col-7': tabletView }">

Однако, вероятно, гораздо более чистым решением было бы использование плагина vue-match-media .

0 голосов
/ 30 октября 2019

Вы пробовали вызывать widthChange () в смонтированном крюке, чтобы он работал под нагрузкой?

Редактировать Попробуйте поместить const tst = this.widthChange; в крюк для мыши

...