在窗口调整大小时隐藏或显示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)
               }
            })
          })
        },