Управление массивами

Последнее обновление: 02.11.2020

Для упрощения работы с массивами во Vue 3 для каждого объекта массива определено ряд методов, с помощью которых можно управлять его элементами:

  • push()

  • pop()

  • shift()

  • unshift()

  • splice()

  • sort()

  • reverse()

Все эти методы по сути являются обертками над одноименными стандартными методами javascript для управления массивами и работают точно также. Главное их отличие от стандартных методов JavaScript состоит в том, что эти методы-обертки информируют систему Vue 3 о том, что с массивом были произведены некоторые действия, и соответственно для этого массива может быть произведен повторный рендеринг на веб-странице.

Но кроме выше описанных методов, которые изменяют отдельные элементы массив, есть ряд методов в javascript, которые возвращают новый массив, типа filter(), concat(), slice(). Результат таких функций лучше привязывать к вычисляемому свойству, которое позволит произвести повторный рендеринг элементов веб-страницы.

Добавление и удаление

Определим код для добавления нового элемента в массив и удаления из массива:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <p>
        <input type="text" v-model="newPhone" />
        <button v-on:click="phones.push(newPhone)">Добавить</button>
    </p>
    <ul>
      <li v-for="(phone, index) in phones">
		<p>{{ phone }} <button v-on:click="phones.splice(index, 1)">Удалить</button></p>
      </li>
    </ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
		newPhone: '',
        phones: ['iPhone 12', 'Galaxy S20', 'Nokia N9', 'Xiaomi Mi10']}
  }
}).mount('#app');
</script>
</body>
</html>

При нажатии на кнопку в массив добавляется введенное в текстовое поле значение, которое доступно через свойство newPhone. И в итоге произойдет обновление списка на веб-странице, и мы увидим добавленный элемент.

И кроме того, для каждого элемента предусмотрена кнопка, через которую по индексу можно удалить элемент из массива.

Управление массивом, добавление и удаление элементов в массив в Vue 3

Возвращение нового массива

Ряд методов, такие как slice, concat, filter, не изменяют текущий массив, а возвращают новый. Одно из решений может заключаться в переустановке массива. Например, используем метод slice, который возвращает часть массива:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <ul>
      <li v-for="phone in phones">
      <p>{{ phone }}</p>
      </li>
    </ul>
    <button v-on:click="updateList">Обновить</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
        phones: ['iPhone 12', 'Galaxy S20', 'Nokia N9', 'Xiaomi Mi10']}
  },
  methods:{
	updateList(){
		this.phones = this.phones.slice(1,3);
	}
  }
}).mount('#app');
</script>
</body>
</html>

Для фиксации нового массива присваиваем полученный массив свойству phones.

Создание нового массива с помощью функции slice в Vue 3

Однако данный способ не всегда является оптимальным. Особенно если мы хотим сохранить старый массив и изменять лишь его визуальное представление. И более идеальным вариантом, как правило, является разделение данных и представления этих данных. Для представления данных обычно определяется вычисляемое свойство-список, элементы которого выводятся на веб-страницу:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <input v-model="start" type="number" />
    <input v-model="end" type="number" />
    <ul>
      <li v-for="phone in visibleList">
      <p>{{ phone }}</p>
      </li>
    </ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return { 
		start:0,
		end:3,
        phones: ['iPhone 12', 'Galaxy S20', 'Nokia N9', 'Xiaomi Mi10']}
  },
  computed:{
	visibleList(){
		return this.phones.slice(this.start,this.end);
	}
  }
}).mount('#app');
</script>
</body>
</html>
Создание нового массива без изменения старого в Vue 3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850