title: invoke different onClick functions in a v-for loop
body: <p>I have a set of data that needs to be looped through but each item in that data has a different onClick event. Something along the lines like:</p>
  <pre><code>list: [
    {
      text: 'a',
      icon: 'a-icon',
      onClick: () =&gt; {
        // do stuff a
      },
    },
    {
      text: '`b`',
      icon: 'b-icon',
      onClick: () =&gt; {
        // do stuff b
      },
    },
  ]
  </code></pre>
  <p>what I initially tried to do was:</p>
  <pre><code>&lt;div v-for=&quot;(item, i) in list&quot; :key=&quot;i&quot; @click=&quot;item.onClick()&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>which didn't work. The error was:</p>
  <pre><code>TypeError: item.onClick is not a function
  </code></pre>
  <p>Then I tried:</p>
  <pre><code>&lt;div v-for=&quot;(item, i) in list&quot; :key=&quot;i&quot; @click=&quot;list[i].onClick()&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>which looks weird but works. Only I can't access <code>this</code> inside <code>onClick</code> function. I could just pass <code>this</code> to the function directly like <code>@click=&quot;list[i].onClick(this)&quot;</code> but it look weird too.</p>
  <p>I knonw I can write a method and do <code>switch</code> according to the index. But then I had to write the <code>onClick</code> function seperately.</p>
  <p>Is there a better way to do this?</p>