在vue 2中單擊外部之後隱藏元素

我試圖在使用Vue 2和laravel單擊外部之後隱藏一個側欄。此側邊欄是在導航欄組件內部創建的。起初，我添加了@click="showSidenav = !showSidenav"只是打開它並初始化數據到showSidenav: false。並且還添加了一個關閉錨標籤來隱藏側邊欄。實際上工作得很好，但是當我腦子裏想到隱藏它的時候，在側邊欄外面點擊時也會如何呢？我創建了一個方法showSidenav並執行該元素的打開並嘗試使用nextTick，但它執行的時間與我調用該方法的時間相同。現在我在方法內部使用jquery再次更改數據，但是當我再次單擊漢堡菜單時，它不會更改數據。在vue 2中單擊外部之後隱藏元素

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 
      } 
     } 
    }

編輯：添加vue-clickaway通過@Nathan的建議。

來源

2017-07-06 claudios

你爲什麼混合DOM操作和vue.js？完全可行的沒有jQuery哈哈。 – WilomGfx

@WilomGfx，是啊大聲笑，我討厭爲什麼我這樣寫：D – claudios

我剛剛有這個問題。使用vue-clickaway。

他們的 '世界你好' 例如：

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'); 
    }, 
    }, 
};

來源

2017-07-06 15:50:52

嘿！我會給它一個鏡頭。 – claudios

試過但沒有運氣。這是我如何設置數據'遠：函數（）{ \t \t \t this.showSidenav =假 \t \t}'的事情是它激發同時我叫openSidenav – claudios

您可以在您的模板代碼的題？它會幫助我更好地瞭解你如何設置事物。 –

在vue 2中單擊外部之後隱藏元素

回答

相關問題