vuejs, how to use v-bind to bind class within a v-for loop

Asked By: Anonymous

The table looks like:

| platform | description | remark | button |

When I click a Forward button, which set this row’s clicked=true, why the button’s class is still btn-primary(color: blue) instead of btn-danger(color: red)?

var app = new Vue({_x000D_
        el: "#app",_x000D_
        data: {_x000D_
            grid_data: [], //ajax_x000D_
        },_x000D_
        methods: {_x000D_
            "forward": function (url, index) {_x000D_
                this.grid_data[index].clicked = true;_x000D_
                openWindow(url);_x000D_
            }_x000D_
        }_x000D_
    })

    <tr v-for="(item,index) in grid_data">_x000D_
        <td>{{ item.platform }}</td>_x000D_
        <td>{{ item.description }}</td>_x000D_
        <td>{{ item.remark }}</td>_x000D_
        <td>_x000D_
            <button v-bind:class="[item.clicked ? 'btn-danger' : 'btn-primary', 'btn', 'btn-sm' ]" v-on:click="forward(item.url, index)">Forward</button>_x000D_
        </td>_x000D_
    </tr>

x000D

Solution

Answered By: Anonymous

The issue here is likely that the clicked attribute does not exist on your data until you add it via your method, and Vue cannot detect that you added it.

Change your code to use $set.

methods: {
  "forward": function (url, index) {
    this.$set(this.grid_data[index], 'clicked',true);
    openWindow(url);
  }
},

Working example.

Additionally, you can avoid passing indexes around. Just pass the item itself.

v-on:click="forward(item)

And in your method,

"forward": function (item) {
  this.$set(item, 'clicked',true);
  openWindow(item.url);
}