Количество обновлений для объектов во вложенном массиве в vue - PullRequest
Новая
       104

Количество обновлений для объектов во вложенном массиве в vue

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

Я использую vue -cli и пытаюсь понять, как обновить счетчик в моем шаблоне: 

<div v-for="(item, index) in outerArray" :key="item.id" v-bind:id="item.name">
   <div>  <p> {{ item.name }}</p> </div>
<div>Count:{{count}}</div>

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

outerArray:[
             { name: 'Ray',
               count: null,
               warning: [{time: '2:00', alert: 'G: 150',},
                         {time: '7:00', alert: 'RR: 38',}]
              },
             { name: 'Mike',
               count: null,
               warning:[{time: '9:00',alert: 'G: 40',}]
             },
    
            ]

Таким образом, результат должен выглядеть так: 

Ray           Mike
Count:2       Count:1

Любая помощь приветствуется, спасибо!

Обновление

Я использовал: 

this.outerArray[index].warning.length

, чтобы показать, сколько предупреждений было в предупреждениях.

1 Ответ

1 голос
/ 14 июля 2020

Если это значение изменяется только от элемента к элементу, то: 

new Vue({
  el: "#app",
  data: {
    outerArray: [{
        name: 'Ray',
        count: null,
        warning: [{
            time: '2:00',
            alert: 'G: 150',
          },
          {
            time: '7:00',
            alert: 'RR: 38',
          }
        ]
      },
      {
        name: 'Mike',
        count: null,
        warning: [{
          time: '9:00',
          alert: 'G: 40',
        }]
      },
    ]
  },
  methods: {
    countWarnings(item) {
      return item.warning.length
    }
  },
  mounted() {
    this.outerArray.forEach(e => {
      e.count = e.warning.length
    })
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(item, index) in outerArray" :key="item.id" v-bind:id="item.name">
    <div>
      <p>{{ item.name }}</p>
    </div>
    <div>Count (from item.warning): {{ item.warning.length }}</div>
    <div>Count (with item.count set at mounted): {{ item.count }}</div>
    <div>Count (with a count method): {{ countWarnings(item) }}</div><br />
    If you're not sure, what a variable holds, you can either use the Vue extension (in Chrome), the console or the screen:<br />
    - The item is: {{ item }}<br />
    - The item.warning is: {{ item.warning }}<br />
    - The item.warning.length is: {{ item.warning.length }}
    <br />
    <hr />
  </div>
</div>
...