Как изменить значение данных vue.js при изменении размера экрана?

Question

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <template v-if="mobile == 1">
            <li><a href="#">Heading</a></li>
        </template>
        <!-- Else use long heading -->
        <template v-else-if="mobile == 0">
            <li><a href="#">Heading Long</a></li>
        </template>
    </ul>
</div>

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                mobile: 0
            }
});

Я ищу способ изменить значение "mobile", когда становится активной точка останова экрана (max-width: 547px). И вернуть его обратно, когда эта мобильная точка останова станет неактивной (экран превышает 547 пикселей). Обычно я использую skel ( https://github.com/ajlkn/skel) для работы с точками останова экрана, но не могу получить доступ к skel из Vue или наоборот. Я бы отказался от использования Vue для этой конкретной задачи, но display: none и display: block отбрасывает мою презентацию - превращая мой элемент в блок.

Answer 1

Проверьте эту библиотеку: https://github.com/apertureless/vue-breakpoints

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <hide-at breakpoint="medium">
        <template v-if="mobile == 1">
            <li><a href="#">Heading</a></li>
        </template>
        </hide-at>
        <!-- Else use long heading -->
        <show-at breakpoint="mediumAndAbove">
        <template v-else-if="mobile == 0">
            <li><a href="#">Heading Long</a></li>
        </template>
        </show-at>
    </ul>
</div>

или просто пойти с media queries ( https://www.w3schools.com/css/css3_mediaqueries_ex.asp)

CSS:

@media screen and (max-width: 600px) {
    #app ul il:first-of-type {
        visibility: visible;
    }
    #app ul il:last-of-type {
        visibility: hidden;
    }
}


@media screen and (max-width: 992px) {
    #app ul il:first-of-type {
        visibility: hidden;
    }
    #app ul il:last-of-type {
        visibility: visible;
    }
}

Конечно, вам решать, что показывать и что скрывать на какой точке останова. Надеюсь, это поможет.

Answer 2

Если вы используете Vuetify, вы можете программно настроить значение данных на основе встроенного breakpointsof xs, sm, md, lg, xl (как указано в Material Design) следующим образом:

computed: {
  mobile() {
    return this.$vuetify.breakpoint.sm
  },
}

mobile изменится на true как только ширина экрана меньше 600 пикселей.

Тогда ваш код будет примерно таким (я также переместил if заявление быть прямо на <li> элемент):

<div id="app">
    <ul>
        <!-- On mobile devices use short heading -->
        <li v-if="mobile"><a href="#">Heading</a></li>
        <!-- Else use long heading -->
        <li v-else><a href="#">Heading Long</a></li>
    </ul>
</div>

Answer 3

Вы можете использовать событие onorientationchange следующим образом:

methods: {
  detectOrientationChange() {
   switch(window.orientation) {  
      case -90 || 90:
        // landscape
      this.mobile = false;
      break; 
      default:
        // portrait
        this.mobile = true;
        break; 
    }
  }
},
mounted() {
  this.$nextTick(()=>{
    window.addEventListener('onorientationchange', this.detectOrientationChange)
  }
},
created() {
  this.detectOrientationChange(); // when instance is created
}