在窗口调整大小时隐藏或显示vue.js

Is there any way to do this suppose, I have two headers in my site now I want that when I resize the window in a certain position it will be hide by v-if directive. I tried to like this but this not working. I don't want to do this by css.

<header v-if="deskMenu" id="headerDesktop" class="menu-desktop flex items-center justify-between py-6 px-10"></header>

<script>
  export default {
    name: "MainNav",

    data() {
       return {
           deskMenu : false,
       }
    },

    mounted() {
       this.$nextTick(function () {
           $(window).on('load resize', function () {
              if (matchMedia('only screen and (min-width: 1024px)').matches) {
                  this.deskMenu = true
                  console.log(this.deskMenu)
              } else {
                  this.deskMenu = false
                  console.log(this.deskMenu)
              }
           })
        })
     },
  }
 </script>
评论
Anne
Anne

Change callbacks to arrow functions, to get the vue component reference with this.

  mounted() {
    this.$nextTick(() => {
        $(window).on('load resize', () =>  {
           if (matchMedia('only screen and (min-width: 1024px)').matches) {
               this.deskMenu = true
               console.log(this.deskMenu)
           } else {
               this.deskMenu = false
               console.log(this.deskMenu)
           }
        })
      })
    },
点赞
评论