Vue: How to enable class of selected button using class binding - php

Question

Alert: Learning Vue :)
I have a list of items displayed in tables along with status button
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
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
here are my html
<td class="center">
<a href="#" class="btn btn-mini">
<i class="fa fa-fw" :class="{'fa-thumbs-o-up': form.isStatus, 'fa-thumbs-o-down': !form.isStatus }" #click="onStatus({{$row->id}})">
</i></a>
</td>
here are my due codes
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) => {
axios[requestType](url, data)
.then(response => {
this.isStatus = response.data.new_status
})
.catch(error => {})
})
}
}

Answer 1

To answer this:
the only problem is class binding not working for clicked item and it is changing for all of the buttons
Obviously because all of your buttons depends on the same one variable isStatus.
You should have different isStatus for each button, like isStatus_n:
But I understand that you don't have those dynamic Vue data property because it is from Laravel.
So you can do like:
<td class="center">
<a href="#" class="btn btn-mini">
<i class="fa fa-fw" :class="{'fa-thumbs-o-up': form.isStatus_{{$row->id}} && form.isStatus_{{$row->id}}.selected, 'fa-thumbs-o-down': !form.isStatus_{{$row->id}} }" #click="onStatus({{$row->id}})">
</i>
</a>
</td>
Then on your method:
// This will insert/update the form.isStatus_n
var newSet = {selected: true};
this.$set(this.form, 'isStatus_'+id, newSet);
Made a simple demo: https://jsfiddle.net/j9whxnfs/37/