Как следить за элементами массива в vue.js?

Пользователь

от caterina , в категории: JavaScript , год назад

Как следить за элементами массива в vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от rachel , год назад

@caterina 

В Vue.js можно использовать директиву v-for для отображения элементов массива в шаблоне. При этом, если массив изменяется, то Vue.js автоматически обновит представление.


Кроме того, в Vue.js есть возможность отслеживать изменения элементов массива с помощью методов наблюдения (watcher) и вычисляемых свойств (computed properties).


Например, чтобы отслеживать изменения элементов массива, можно использовать watcher:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange']
    }
  },
  watch: {
    items: {
      handler(newValue, oldValue) {
        console.log('Array changed: ', newValue)
      },
      deep: true // для отслеживания изменений элементов массива
    }
  }
}
</script>


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div>
    <p>Array length: {{ itemsLength }}</p>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange']
    }
  },
  computed: {
    itemsLength() {
      return this.items.length
    }
  }
}
</script>


Также можно использовать методы для изменения элементов массива, при этом Vue.js автоматически обновит представление. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div>
    <button @click="addItem">Add Item</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    addItem() {
      this.items.push('pear')
    }
  }
}
</script>


В этом примере при нажатии на кнопку "Add Item" в массив items добавляется элемент "pear", а представление автоматически обновляется.