Vue передать данные vuex для обновления счетчика и изменения фона - PullRequest
Новая
       10

Vue передать данные vuex для обновления счетчика и изменения фона

0 голосов
/ 08 июля 2020

Это продолжение предыдущего вопроса: Vue @click counter и обновление фона в течение 2 минут для многоразового компонента

Я изменил данные, которые будут храниться в vuex и добавил массив предупреждений: 

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',
          },]
          
        },
    
      ]
},

, и я получаю данные в дочернем компоненте следующим образом: 

props: ['arrays'],

, который отображается в шаблоне: 

<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>

из родительского компонента, который передает данные: 

<card :arrays=arrays></card>

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

Я хотел бы сделать вместо обновления счетчика и изменения фона с помощью v-on: click greet () , как и в предыдущем вопросе, я хотел бы, чтобы счетчик и 2-минутное изменение фона для каждого предупреждения в массивах .

Так, например. Карточка профиля Алисы покажет счет как 1 и установит изменение фона на 2 минуты, а Джон покажет 2 для счета и дважды изменит фон в течение 2 минут. Таким образом, всякий раз, когда я добавляю пользователю новое предупреждение, он обновляет счетчик и меняет фон на 2 минуты.

...