javascript - 我如何收听我的组件点击，因为我有一个 div 作为父级

Question

有什么方法可以使用v-ifwith v-for，因为我想听，@click但我不能，因为我使用 aDIV作为我的树浏览器的父级

我尝试将我的 v-if 与 my 一起使用，<tree-browser @click="(node) => $emit('do', node)" v-if="expanded" v-for="..."/>但由于 v-for 它不起作用：

我如何使用v-if="expanded"和聆听我的点击，

这是我的代码：

<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>
            {{node.name}}
        </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>

标签： javascriptvue.js