Как правило, мы можем использовать v-for для любого итеративного типа данных. Object в JavaScript — это набор данных «ключ-значение», и мы можем итерировать его свойства
через с помощью v-for.
Пример v-for для перебора ключей и значений объекта, подобен предыдущему примеру с v-for с крошечной разницей.
Здесь мы выбираем не только value и index, но еще и key. Таким образом, синтаксис теперь становится следующим:
v-for="(value, key, index) in obj"Здесь obj — наш целевой объект для итерации.
Например, предположим, что у нас есть следующий объект с именем course, который
содержит название, описание и имя лектора:
<script setup>
const course = {
title: 'Frontend development with Vue',
description: 'Learn the awesome of Vue',
lecturer: 'Maya and Raymond'
}
</script>В template мы перебираем свойства курса и выводим их значение в формате <index>.< key > : <value>, как показано в следующем
блоке кода:
<template>
<ul>
<li v-for="(value, key, index) in course" :key="key">{{index}}. {{key}}: {{value}}</li>
</ul>
</template>Вывод каждого элемента, будет выглядеть так:
0. title: Frontend development with Vue
1. description: Learn the awesome of Vue
2. lecturer: Maya and Raymond
Далее вы попрактикуетесь в написании базовых циклов для свойств объекта.
Упражнение - итерация объекта через v-for
Создайте и импортируйте компонент как это показано в упражении.
Создайте скелет вашего компонента используя секции - template, script, styles.
Секция script будет выглядеть так:
<script setup>
const information = {
title: "My list component information",
subtitle: "Vue JS basics",
items: ["Looping", "Data", "Methods"],
}
</script>В секции <template> мы будем просматривать информацию и отображать значения свойств объекта:
<template>
<div>
<div v-for="(value, key) in information" :key="key">
{{key}}: {{ value }}
</div>
</div>
</template>Обратите внимание, что Vue отображает значение для элементов, которые представляет собой массив строк, так же, как мы
объявили их в секции data - в квадратных скобках.
Чтобы отобразить данные в лучшем виде, мы можем использовать встроенный JavaScript метод toString() для преобразования значений всех элементов в строку с разделением запятыми.
<template>
<div>
<div v-for="(value, key) in information" :key="key">
{{key}}: {{ value.toString() }}
</div>
</div>
</template>Понимание итераций (или циклов) является ключом не только к работе с Vue, но и JavaScript в целом. Теперь, когда мы рассмотрели, как обращаться с
циклами с использованием директивы v-for и важности key мы изучим, как использовать и писать методы в компоненте.