Pass vuex data to update counter and change background

1

I have data stored in vuex with an alert array:

export default new Vuex.Store({
  state: {

arrays: [
        {
           name: 'John',
            count: null,
           alert: [
          {
              date: 'Jan 28/2:00/2020',
              alarm: 'rate: 150',
          },
          {
              date: 'Feb 20/7:00/2020',
              alarm: 'Temp 38',
          },
          
        ]
        },
        {
          name: 'Alice',
           count: null,
          alert:[
           {
              date: 'March 21/9:00/2020',
              alarm: 'Temp 40',
          },]
          
        },
    
      ]
},

and I’m getting the data in a child component like this:

props: ['arrays'],

which is displaying in the template:

<div class="card"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
<div class="name">  <p> {{ item.name }}</p> </div>
<div class="l"  v-on:click="greet()" >Alert{{count}}</div>

from a parent component that passes the data:

<card :arrays=arrays></card>

data () {
    return {
      arrays: this.$store.state.arrays,

What I would like to do is instead of updating the count and changing the background with the v-on:click greet() like I am currently doing:

greet: function (arrIndex) {
   var orig = document.getElementById(this.arrays[arrIndex].name).style.background;
   var name = this.arrays[arrIndex].name;
   var bord = document.getElementById(this.arrays[arrIndex].name).style.border;

   document.getElementById(this.arrays[arrIndex].name).style.background = '#454647';
   document.getElementById(this.arrays[arrIndex].name).style.border = 'solid yellow';

   setTimeout(function(){
        document.getElementById(name).style.background = orig; 
        document.getElementById(name).style.border = bord ; 
   }, 12000);
   
    this.arrays[arrIndex].count ++
    },

I would like the counter and 2 min background change for each alert in arrays .

So for ex. Alice profile card will show count as 1 and set background change for 2 min and John would show 2 for count and change background for 2 min twice. This way whenever I add a new alert to a user it will update counter and change background for 2 min. I’m not sure exactly how I can pass alert instead of having to click? Thanks!

2

You could try: Maybe setTimeout? With something like a deBounce()

3

Thank you! I figured out how to show how many alarms for each user but I’m still trying to figure out how I can get the background to change for a few seconds when a new alarm comes. I have it working with v-on:click and settimeout but I need a way to update without onclick