vueのリストクリックボタンに弾枠が表示され、弾枠外弾枠をクリックして消える

    
    
    



    

        

            

                
                {{item.id}}--
                {{item.name}}
                
dialog
            
        
    

    
        new Vue({
            el: '#app',
            data: {
                dialog:false,
                cIndex: -1,
                data1: [
                    { id: 1, name: "a" },
                    { id: 2, name: "b" },
                    { id: 3, name: "c" },
                    { id: 4, name: "d" },
                ]
            },
            mounted(){
                document.addEventListener('click', (e)=> {
                    if (e.target.className != 'modalDiaLog') {
                        this.dialog = false;
                    }
                })
            },
            methods:{
                toggle(index){
                    this.cIndex = index;
                    this.dialog = !this.dialog;
                }
            }
        })