[Vuejs]-Vue: How to enable class of selected button using class binding

by

0👍

✅

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/

👤rmondesilva

Leave a comment