vue 怎么实现点击出现侧边栏之后，再点击空白地方侧边栏消失？

Question

<div class="scan" v-on:click="show">    <svg class="icon" aria-hidden="true">    <use xlink:href="#icon-xiangji_"></use>    </svg></div><div id="cam" v-show="flag">    <button @click="back">返回</button>    相机页面</div>js代码var vm=new Vue({        el:'#app',        data:{            flag:false,        },        methods:{            show(){                var sp=document.getElementById("cam");                if(sp){                    if(!sp.contains(event.target)){                        this.flag=!this.flag                    }                }            },            back(){                this.flag=!this.flag            }        }    })在网上找的这个方法似乎不行，只对当前按钮有效。求大神指导    var sp=document.getElementById("cam");                if(sp){                    if(!sp.contains(event.target)){                        this.flag=!this.flag                    }                }

Answer 1

<div class="scan" @click.stop="show">

    <svg class="icon" aria-hidden="true">

        <use xlink:href="#icon-xiangji_"></use>

    </svg>

</div>

<div id="cam" v-show="flag">

    <button @click="back">返回</button>

    相机页面

</div>

mounted() {

    $('#cam').on('click', (event) => event.stopPropagation());

    $(document).on('click', () => {

        this.back();

    });

},

methods: {

    show() {

        this.flag = true;

    },

    back(){

        this.flag = false;

    }

}