<div id="app">
<b-table striped hover :items="items">
<template v-slot:cell(isInProgress)="data">
<b-button
size="sm"
@click="putNewValue(data.item)"
class="mr-2"
>
{{data.item.isInProgress ? 'Обновление...' : 'Исправить'}}
</b-button>
</template>
</b-table>
</div>
var app = new Vue({
el: "#app",
data() {
return {
items: [
{
age: 40,
first_name: "Dickerson",
last_name: "Macdonald",
isInProgress: false
},
{ age: 21, first_name: "Larsen", last_name: "Shaw",
isInProgress: false },
{ age: 89, first_name: "Geneva", last_name: "Wilson",
isInProgress: false },
{ age: 38, first_name: "Jami", last_name: "Carney",
isInProgress: false }
],
modalShow: false
};
},
methods: {
putNewValue(target) {
target.isInProgress = true;
setTimeout(() => {
target.isInProgress = false;
}, 2000);
}
}
});
Vue.use(BootstrapVue);
This Pen doesn't use any external CSS resources.