How I can listen to my component click, Since i have a div as a parent

Is there any way to use v-if with v-for, because I want to listen to @click but I can't since I'm using a DIV as a parent of my tree browser

I tried to use my v-if with my <tree-browser @click="(node) => $emit('do', node)" v-if="expanded" v-for="..."/> but it doesnt work because of v-for:

how can i use v-if="expanded" and listen to my click,

This is my code :

<template>
    <div class="folder">
        <div @click="expanded = !expanded" :style="{'margin-left': `${depth * 10}px`}">
            <span v-if="hasChilden">
                <i class="fas font-size-16 text-warning" :class="(expanded == true) ? 'fa-folder-open' : 'fa-folder'"></i>
            </span>
            
        </div>
        
       
        <div v-if="expanded">
            <tree-browser @click="(node) => $emit('do', node)" :depth="depth + 1" :node="child" v-for="child in node.children" :key="child.id" :id="child.id"/>
        </div>
    </div>
</template>

<script>
export default {
    name: 'treeBrowser',
    props: {
        node: Object,
        depth: {
            type: Number,
            default:0
        }
    },
    data(){
        return {
            expanded: false,
        }
    },
    computed:{
        hasChilden(){
            return this.node.children;
        }
    }
}
</script>

<style scoped>
.folder{
    cursor: pointer;
}
</style>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW