title: How to prevent/stop click propagation in vuejs
body: <p>I have a recursive list (tree) and each element has a <code>@click="sayHello(el.id)"</code>. Now the problem is, since it is a nested list like:</p>
  
  <pre><code>list-element-0-01
  ├──list-el-1-01
  │   └──list-el-2-01
  └──list-el-1-02
      └──list-el-2-02
  </code></pre>
  
  <p>If I click the element: <code>list-el-2-01</code> then I get the output of</p>
  
  <pre><code> &gt; "list-el-2-01"
   &gt; "list-el-1-01"
   &gt; "list-el-0-01"
  </code></pre>
  
  <p>In exact that order. I mean I get it, looking at the html:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li @click="sayHello('list-el-0-01')"&gt; one-one
  
      &lt;ul&gt;
        &lt;li @click="sayHello('list-el-1-01')"&gt; two-one
          &lt;ul&gt;
            &lt;li @click="sayHello('list-el-2-01')"&gt; three-one &lt;/li&gt; // I click this
          &lt;/ul&gt;
        &lt;/li&gt;
  
        &lt;li @click="sayHello('list-el-1-02')"&gt; two-two
          &lt;ul&gt;
            &lt;li @click="sayHello('list-el-2-02')"&gt; three-two &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>It makes sense that I am also clicking all the wrapping elements, somehow. My question - is there a way to only have the <strong>exact</strong> element fire it's click event?</p>