title: Vue: How to enable class of selected button using class binding
body: <p>Alert: Learning Vue :)</p>
  
  <p>I have a list of items displayed in tables along with status button</p>
  
  <p><a href="https://i.stack.imgur.com/2bEec.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2bEec.png" alt="I am using this sortable table"></a></p>
  
  <p>I tried to use the v-for but than my search and sortable options doesn't work so I am displaying data using php (laravel) So I only want my status button to work with Vue</p>
  
  <p>I have so far managed to make it work but the only problem is class binding not working for clicked item and it is changing for all of the buttons</p>
  
  <p>here are my html</p>
  
  <pre><code>&lt;td class="center"&gt;
      &lt;a href="#" class="btn btn-mini"&gt;
      &lt;i class="fa fa-fw" :class="{'fa-thumbs-o-up': form.isStatus, 'fa-thumbs-o-down': !form.isStatus }" @click="onStatus({{$row-&gt;id}})"&gt;
      &lt;/i&gt;&lt;/a&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>here are my due codes</p>
  
  <pre><code>new Vue({
    el: '#viewall',
  
    data: {
      form: new Form({
        status: '',
        isStatus: true
      }),
  
      errors: new Errors()
    },
  
    methods: {
      onStatus(id) {
        this.form.statusUpdate('post', 'updatestatus', id)
      }
    }
  })
  
  class Form {
    constructor() {}
  
    // update status
    statusUpdate(requestType, url, id) {
      let data = new FormData()
  
      data.set('pageid', id)
  
      return new Promise((resolve, reject) =&gt; {
        axios[requestType](url, data)
  
          .then(response =&gt; {
            this.isStatus = response.data.new_status
          })
  
          .catch(error =&gt; {})
      })
    }
  }
  </code></pre>