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">&nbsp; &nbsp; <svg class="icon" aria-hidden="true">&nbsp; &nbsp; &nbsp; &nbsp; <use xlink:href="#icon-xiangji_"></use>&nbsp; &nbsp; </svg></div><div id="cam" v-show="flag">&nbsp; &nbsp; <button @click="back">返回</button>&nbsp; &nbsp; 相机页面</div>mounted() {&nbsp; &nbsp; $('#cam').on('click', (event) => event.stopPropagation());&nbsp; &nbsp; $(document).on('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; this.back();&nbsp; &nbsp; });},methods: {&nbsp; &nbsp; show() {&nbsp; &nbsp; &nbsp; &nbsp; this.flag = true;&nbsp; &nbsp; },&nbsp; &nbsp; back(){&nbsp; &nbsp; &nbsp; &nbsp; this.flag = false;&nbsp; &nbsp; }}