Jquery 在vue 2中单击外部后隐藏元素

在使用Vue 2和laravel单击外部后，我试图隐藏一个侧边栏。此侧栏是在导航栏组件内创建的。首先，我添加了一个

@click=“showSidenav=！showSidenav”

来打开它并将数据初始化为

showSidenav:false

。还添加了一个close anchor标记来隐藏侧边栏。工作很好，但当事情在我脑海中出现时，在侧边栏外单击时也隐藏它怎么样？我创建了一个方法

showSidenav

并执行元素的打开，并尝试使用

nextTick

，但它的执行时间与调用该方法的时间相同。目前，我在方法中使用jquery再次更改数据，但当我再次单击汉堡包菜单时，它不会更改数据

编辑：根据@Nathan的建议，添加了

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

从“vue clickaway”导入{mixin as clickaway}；
导出默认值{
混合：[单击离开]，
模板：“
单击away
”，
方法：{
离开：函数（）{
log（'clicked away'）；
},
},
};

为什么要混合使用dom操作和vue.js？没有jQuery lol完全可行。@WilomGfx，是的，lol，我讨厌我为什么这样写：DHey！我来试试。试过了，但运气不好。这就是我设置数据的方式：

away:function（）{This.showSidenav=false}，

问题是它在我调用opensidenav的同时启动，你能在你的问题中包含你的模板代码吗？这将帮助我更好地了解你们是如何安排的。已经更新了上面的帖子。顺便说一句，我是用npm安装的。好吧，我真的很好奇，所以我看了看它，基本上问题是，只要你点击将

showSidenav

设置为

true

的链接，你就会同时触发

away（）

函数，然后将

showSidenav

设置为

false

。解决方案是将这两个元素包装在包装器

div

中，并将

vue置于clickaway

包装元素上。是一个JSFIDLE，它显示了它的工作原理。

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

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