vue 2で外部をクリックした後に要素を非表示にする

Question

Vue 2とlaravelを使用して外部をクリックした後にサイドバーを非表示にしようとしています。このサイドバーは、navbarコンポーネント内で作成されました。最初は@click="showSidenav = !showSidenav"を追加して開き、データをshowSidenav: falseに初期化しました。また、サイドバーを隠すために近いアンカータグを追加しました。実際にはうまく動作しますが、サイドバーの外側をクリックしたときにも隠れてしまうのはどういうことなのでしょうか？メソッドshowSidenavを作成し、要素のオープンを行い、nextTickを試しましたが、メソッドを呼び出すときと同じ時間が実行されます。今のところ私はメソッド内でjqueryを使用してデータを再度変更しますが、再度ハンバーガーメニューをクリックするとデータは変更されません。

template structure

<a href="#" v-on-clickaway="away" @click="openSidenav">Hamburger menu</a> 

スクリプト

import { mixin as clickaway } from 'vue-clickaway'; 
    export default { 
     mixins: [ clickaway ], 
     data() { 
      return { 
       showSidenav: false, 
      } 
     }, 
     methods: { 
      openSidenav: function() { 
       this.showSidenav = true 
      }, 
      away: function() { 
       this.showSidenav = false 
      } 
     } 
    } 

EDIT：@Nathanにより示唆されるようvue-clickawayを追加しました。

Answer 1

この問題が発生しました。 vue-clickawayを使用してください。

彼らの 'Hello Worldの' 例：

import { mixin as clickaway } from 'vue-clickaway'; 

export default { 
    mixins: [ clickaway ], 
    template: '<p v-on-clickaway="away">Click away</p>', 
    methods: { 
    away: function() { 
     console.log('clicked away'); 
    }, 
    }, 
};