title: Individual click handlers in v-for loop
body: <p>I'm generating a list with the following code:</p>
  
  <pre><code>      &lt;li class="list-group-item border" v-for="command in commands" :key="command"&gt;
          &lt;div v-if="!command.args"&gt;
            &lt;h3&gt;{{ command.name }}&lt;/h3&gt;
            &lt;small&gt;{{ command.desc }}&lt;/small&gt;
          &lt;/div&gt;
          &lt;div v-else&gt;
            &lt;button @click="toggleActive"&gt;{{ command.name }}&lt;/button&gt;
            &lt;small&gt;{{ command.desc }}&lt;/small&gt;
            &lt;div class="args" v-if="active" v-for="(argDesc, argName) in command.args" :key="argName, argDesc"&gt;
              &lt;hr&gt;
              &lt;p&gt;{{ argName }}&lt;/p&gt;
              &lt;small&gt;{{ argDesc }}&lt;/small&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  </code></pre>
  
  <p>using the following data:</p>
  
  <pre><code>  commands: {
      foo: { name: "foo", desc: "bar" },
      lorem: {
        name: "lorem",
        desc: "ipsum",
        args: {
          place: "holder"
        }
      },
  </code></pre>
  
  <p>and the method:</p>
  
  <pre><code>  methods: {
      toggleActive: function(event) {
        let clickedButton = event.currentTarget;
        clickedButton.classList.toggle("active");
        if (this.active) {
          this.active = false;
        } else if (!this.active) {
          this.active = true;
        }
      }
    }
  </code></pre>
  
  <p>If there is a more elegant solution to this, I'd like to know but my real question is how can I make it so that the onclick event fires for the clicked button and not all of the generated buttons?</p>