title: Vue.js add class on specific element
body: <p>So im creating a basic tasklist where i want to set them done, when the <code>&lt;li&gt;</code>is clicked. When it's clicked i want that a class is added to the <code>&lt;li&gt;</code> thats clicked. i could not figure this out with the docs so i hope someone could help me out :D</p>
  
  <p>The code i already have:</p>
  
  <pre><code>        &lt;transition-group name="list"&gt;
              &lt;li  class="list-item list-group-item"  v-for="(task, index) in list" :key="task.id" v-on:click="finishTask(task.id)" &gt;
                  @{{ task.text }}
                  &lt;button @click="removeTask(task.id)" class="btn btn-danger btn-xs pull-right"&gt;Delete&lt;/button&gt;
              &lt;/li&gt;
          &lt;/transition-group&gt;
  
  
  
      &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>    // get the csrf token from the meta
  var csrf_token = $('meta[name="csrf-token"]').attr('content');
  
  export default {
      data() {
          return {
              list: [],
              taskInput: {
                  id: '',
                  text: ''
              }
          };
      },
  
      // So the tasks will show when the page is loaded
      created() {
          this.allTasks();
      },
  
      methods: {
          // get all the existing tasks
          allTasks() {
              axios.get('tasks').then((response) =&gt; {
                  this.list = response.data;
              });
          },
          // create a new task
          createTask() {
              axios({
                  method: 'post',
                  url: '/tasks',
                  data: {
                      _token: csrf_token,
                      text: this.taskInput.text,
                  },
              }).then(response =&gt; {
                  this.taskInput.text = '';
                  this.allTasks();
              });
          },
          // remove the tasks
          removeTask(id) {
              axios.get('tasks/' + id).then((response) =&gt; {
                  this.allTasks();
              });
          },
          finishTask(id) {
              axios({
                  method: 'post',
                  url: 'tasks/done/' + id,
                  data: {
                      _token: csrf_token,
                      data: this.taskInput,
                  },
              }).then(response =&gt; {
                  this.allTasks();
              });
          }
      }
  }
  </code></pre>
  
  <p>I know how i should do this with jquery but not with vue js, i hope this aint a to stupid question :D</p>