В большинстве практических сценариев мы работаем с данными как с объектами, особенно когда перебор массива объектов. Vue позволяет легко управлять различными состояния данных через синтаксис директивы.
v-for="(item, index) in items" :key="index"Теперь item является Объектом с различными свойствами. Вы можете
привязать каждое свойство, используя то, что вы уже узнали, чтобы отобразить его значение.
Например, предположим, что в элементе у нас будут id, title, description и
другой массив - characteristics, содержащий некоторые строки.
Мы можем отобразить информацию о заголовке и описании для каждого элемента, например:
<template>
<ul>
<li v-for="(item, index) in items" :key="item.id">
<h2>{{ item.title }}</h2>
<span>{{ item.description }}</span>
</li>
</ul>
</template>Обратите внимание, что здесь мы не используем индекс в качестве ключа; вместо этого мы используем id как уникальный
идентификатор для ключа. Считается более безопасным подходом к использованию в качестве ключа,i d элемента или любое другое
уникальное для каждого элемента значение, и нам также не нужно включать индекс в синтаксис в данном случае, так как мы его не используем.
Поскольку characteristics— это массив, мы отображаем его значения с помощью v-for.
Вам не обязательно использовать имя item, для итерируемого элемента, как показано в примере. Вместо этого вы можете дать ему другое, более осмысленное имя, которое вам подходит.
В следующем примере мы используем str для каждого элемента в item.characteristics:
<template>
<ul>
<li v-for="item in items" :key="item.id">
<h2>{{ item.title }}</h2>
<span>{{ item.description }}</span>
<ul>
<li v-for="(str, index) in item.characteristics" :key="index">
<span>{{ str }}</span>
</li>
</ul>
</li>
</ul>
</template>А секция script, будет выглядеть так:
<script setup>
const items = [
{
id: 1,
title: "Item 1",
description: "About item 1",
characteristics: ["Summer", "Winter", "Spring", "Autumn"]
},
{
id: 2,
title: 'Item 2",
description: 'About item 2",
characteristics: ["North", "West", "East", "South"]
}
]
</script>В результате, у нас появится заголовок элемента, а ниже будут описание, и характеристики.
Понимание того, как перебирать коллекции объектов с помощью v-for, важно и полезно для обработки данных, особенно, если вы работаете с внешними данными. В следующем упражнении мы объединим v-for и v-if, чтобы отобразить список объектов с условием.
Упражнение - использование v-for для итерации массива объектов с использованием v-if
В этом упражнении мы будем управлять массивом данных Vue и итерировать объекты внутри него.
Создайте и импортируйте компонент, как это сделано в упражнении.
Создайте скелет компонента:
<template>
</template>
<script>
</script>
<style></style>Затем наполним этот шаблон данными:
<script setup>
const interests = [
{
title: "TV",
favorites: ["Designated Survivor","Spongebob"],
},
{
title: "Games",
favorites: ["CS:GO"],
},
{
title: "Sports",
favorites: [],
},
];
</script>В template мы перебираем interests и отображаем заголовок для каждого item в массиве interests:
<template>
<div>
<h1>Looping through array of objects</h1>
<ul>
<li v-for="(item, n) in interests" :key="n">
{{ item.title }}
</li>
</ul>
</div>
</template>Давайте создадим второй цикл v-for для перебора списка favorites для каждого элемента. Примечание
что мы используем разные имена — fav и m — для нашего вложенного цикла:
<template>
<div>
<h1>Looping through array of objects</h1>
<ul>
<li v-for="(item, n) in interests" :key="n">
{{ item.title }}
<ol>
<li v-for="(fav, m) in item.favorites" :key="m">{{ fav }}</li>
</ol>
</li>
</ul>
</div>
</template>При проверке элементов DOM (нажмите Ctrl + F12 или откройте Инструменты разработчика) вы можете увидеть
есть несколько пустых элементов. Это связано с тем, что движок Vue по-прежнему отображает элемент <ol>, несмотря на то, что favorites является пустым массивом:
Теперь нам нужно скрыть этот пустой элемент <ol>. Мы проверим, является ли массив избранного пустым (length > 0), а затем отобразим HTML-элемент упорядоченного списка.
Давайте добавим директиву v-if в <ol> с условием item.favorites.length > 0:
<ol v-if="item.favorites.length > 0">
<li v-for="(fav, m) in item.favorites" :key="m">
{{ fav }}
</li>
</ol>Это не повлияет на внешний вид вашей страницы, но когда вы
осмотрите дерево DOM в своем браузере, вы увидите HTML-комментарий <!------> , в режиме продакшн - такие комментарии уберуться.
В этом упражнении мы перебрали сложные массивы объектов, вывели вложенные ключи для этих объектов и управляли отображением элементов, на основе существования данных.
Далее мы поэкспериментируем с перебором коллекции с ключом (или объекта). 93