title: How I can listen to my component click, Since i have a div as a parent
body: <p>Is there any way to use <code>v-if</code> with <code>v-for</code>,  because I want to listen to <code>@click</code> but I can't since I'm using a <code>DIV</code> as a parent of my tree browser</p>
  <p>I tried to use my v-if with my <code>&lt;tree-browser @click=&quot;(node) =&gt; $emit('do', node)&quot; v-if=&quot;expanded&quot; v-for=&quot;...&quot;/&gt;</code> but it doesnt work  because of v-for:</p>
  <p>how can i use <code>v-if=&quot;expanded&quot;</code> and listen to my click,</p>
  <p>This is my code :</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;folder&quot;&gt;
          &lt;div @click=&quot;expanded = !expanded&quot; :style=&quot;{'margin-left': `${depth * 10}px`}&quot;&gt;
              &lt;span v-if=&quot;hasChilden&quot;&gt;
                  &lt;i class=&quot;fas font-size-16 text-warning&quot; :class=&quot;(expanded == true) ? 'fa-folder-open' : 'fa-folder'&quot;&gt;&lt;/i&gt;
              &lt;/span&gt;
              {{node.name}}
          &lt;/div&gt;
          
         
          &lt;div v-if=&quot;expanded&quot;&gt;
              &lt;tree-browser @click=&quot;(node) =&gt; $emit('do', node)&quot; :depth=&quot;depth + 1&quot; :node=&quot;child&quot; v-for=&quot;child in node.children&quot; :key=&quot;child.id&quot; :id=&quot;child.id&quot;/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'treeBrowser',
      props: {
          node: Object,
          depth: {
              type: Number,
              default:0
          }
      },
      data(){
          return {
              expanded: false,
          }
      },
      computed:{
          hasChilden(){
              return this.node.children;
          }
      }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .folder{
      cursor: pointer;
  }
  &lt;/style&gt;
  </code></pre>