I created a flag and added new css classes.. it works but has poor code. If i found a better and clean solution i post it here
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
controlAnimation: false,
items: [{
id: 1,
name: 'Frozen Yogurt',
calories: 159,
},
{
id: 2,
name: 'Ice cream sandwich',
calories: 237,
},
{
id: 3,
name: 'Eclair',
calories: 262,
},
{
id: 4,
name: 'Cupcake',
calories: 305,
},
],
headers: [{
text: 'Dessert',
value: 'name',
},
{
text: 'Calories',
value: 'calories'
},
],
};
},
methods: {
blink(item) {
if (this.controlAnimation) {
let itemClassTrue = 'blink-even-true'
/* check item.value, based on condition...
itemClassTrue = 'blink-less-true'
itemClassTrue = 'blink-even-true'
itemClassTrue = 'blink-great-true'
*/
return itemClassTrue;
} else {
let itemClassFalse = 'blink-great-false'
/* check item.value, based on condition...
itemClassTrue = 'blink-less-false'
itemClassTrue = 'blink-even-false'
itemClassTrue = 'blink-great-false'
*/
return itemClassFalse;
}
},
getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
},
updateValues() {
const newValues = this.items.map((el) => {
return {...el, calories: this.getRandomInt(100,500)};
})
this.items = newValues
}
},
computed: {
displayItems() {
this.controlAnimation = !this.controlAnimation
var newItems = this.items.map((el) => {
return {...el, calories: el.calories * 1};
})
return newItems
}
},
});
<!-- language: lang-css -->
.blink-less-true {
animation: blinking-less-true 1s 2 !important;
--background-color: rgb(196, 76, 76) !important;
}
.blink-even-true {
animation: blinking-even-true 1s 2 !important;
--background-color: #fa0 !important;
}
.blink-great-true {
animation: blinking-great-true 1s 2 !important;
--background-color: rgb(3, 163, 70) !important;
}
.blink-less-false {
animation: blinking-less-false 1s 2 !important;
--background-color: rgb(196, 76, 76) !important;
}
.blink-even-false {
animation: blinking-even-false 1s 2 !important;
--background-color: #fa0 !important;
}
.blink-great-false {
animation: blinking-great-false 1s 2 !important;
--background-color: rgb(3, 163, 70) !important;
}
@keyframes blinking-less-false {
0% { background-color: var(--background-color); }
100% { background-color: #fff; }
}
@keyframes blinking-even-false {
0% { background-color: var(--background-color); }
100% { background-color: #fff; }
}
@keyframes blinking-great-false {
0% { background-color: var(--background-color); }
100% { background-color: #fff; }
}
@keyframes blinking-less-true {
0% { background-color: var(--background-color); }
100% { background-color: #fff; }
}
@keyframes blinking-even-true {
0% { background-color: var(--background-color); }
100% { background-color: #fff; }
}
@keyframes blinking-less-true {
0% { background-color: var(--background-color); }
100% { background-color: #fff; }
}
<!-- language: lang-html -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-row class="pa-5">
<v-btn
@click="updateValues()"
> Update value </v-btn>
</v-row>
<v-row class="px-5">
<v-data-table
hide-default-footer
:headers="headers"
:items="displayItems"
:item-class="blink"
/>
</v-row>
</v-container>
</v-app>
</div>
<!-- end snippet -->
you can use `item-class` prop in your `v-data-table` to achieve the effect.
according to [DOC][1] for this prop we have:
> Property on supplied items that contains item’s row class or function that takes an item as an argument and returns the class of corresponding row
so you can pass this prop a function that based on the conditions met, returns a class like `blink` to be applied to the specified row.
here is a demo of this feature: (please click on `Full page` after running the code snippet below to see the effect clearly)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
rowToBlink: null,
items: [{
id: 1,
name: 'Frozen Yogurt',
calories: 159,
},
{
id: 2,
name: 'Ice cream sandwich',
calories: 237,
},
{
id: 3,
name: 'Eclair',
calories: 262,
},
{
id: 4,
name: 'Cupcake',
calories: 305,
},
],
headers: [{
text: 'Dessert',
value: 'name',
},
{
text: 'Calories',
value: 'calories'
},
],
};
},
methods: {
blink(item) {
if (item.id === this.rowToBlink) return 'blink';
return '';
}
},
});
<!-- language: lang-css -->
.blink {
animation: blinking ease-out 1s 2;
}
@keyframes blinking {
0% {
background-color: #06c3d1;
}
100% {
background-color: #fff;
}
}
<!-- language: lang-html -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-row class="pa-5">
<v-autocomplete v-model="rowToBlink" outlined label="select row to blink" :items="items" item-text="name" item-value="id"></v-text-field>
</v-row>
<v-row class="px-5">
<v-data-table hide-default-footer :headers="headers" :items="items" :item-class="blink"></v-data-table>
</v-row>
</v-container>
</v-app>
</div>
<!-- end snippet -->
for the sake of this example I bind the data table items array to a select box where you can select the item you want and passed a method called `blink` to the data table's `item-class` prop.
what this function does is that it checks if the selected item's id from the select box matches the data table's item id then returns a class called 'blink' for the specified item (row) in the table, otherwise it returns no class name.
the blink effect is taken care of in the `.blink` css class where you can play with the css features (time duration, delay, easing function, ...) to achieve the desired look.
some idea on how to implement this in your real app situation would be to store the campaign name in a variable after the api call returns like:
```js
async apiCall(someArg, campaignName) {
const res = await apiFn(someArg);
// store the campaign name in a variable in data object if the res is what you are looking for
if (res) this.campaignName = campaignName;
}
```
then your `item-class` function would be something like this:
```js
blink(item) {
if (item.name === this.campaignName) return 'blink';
return '';
}
```
[1]: https://vuetifyjs.com/en/api/v-data-table/#props-item-class
