FrontElf Docs

ViteTemplateHTML

Цикли з масивами, Json файлами та API

Цей документ описує підключення компонентів в циклах, ввивід контенту з json файлу, API та масиву.

Використання контенту з json:

Файли json з данними розміщуються у папці src/data/*.json, в циклі вказується лише назва файлу.

Данні елемента доступні в ключі який йде першим в loop="ключ_елемента, index in data".

Також доступні для використання параметри index та length.

// src/html/components/Products/Products.html
// src/data/products.json

<each data="products.json" loop="product, index in data">
   <ProductCard product="{{product}}" index="{{index}}"/>
</each>


або

<each data="products.json" loop="product, index in data">
   <div class="product-card">
      <span>{{index + 1}}:</span>
      <img src="{{product.image}}" alt="{{product.title}}"/>
      <h2>{{product.title}}</h2>
      <p>{{product.info}}</p>
   </div>
</each>

Використання index та length

<each data="products.json" loop="product, index, length in data">
   <if condition="index < 10"
      <ProductCard/>
   </if>
   <if condition="length > 10"
      <Pagination/>
   </if>
</each>

Використання контенту з API:

Для виводу контенту з відповіді API замість назви файлу вказується URL API.

Приклад з https://jsonplaceholder.typicode.com/users

// https://jsonplaceholder.typicode.com/users

<each data="https://jsonplaceholder.typicode.com/users" loop="user, index in data">
   <div class="user-card">
      <span>{{index + 1}}:</span>
      <h2>{{user.name}}</h2>
      <p>{{user.username}}</p>
      <p>{{user.address.street}}</p>
      <p>{{user.email}}</p>
   </div>
</each>

Простий цикл з масивом:

<ul class="list">
   <each loop="item, index in ['apple', 'banana', 'orange']">
      <li>{{index + 1}}: {{item}}</li>
   </each>
</ul>

Vue-style синтаксис (v-for, v-range)

Цикл v-for

<div v-for="(item, index) in items">
   {{ index + 1 }}. {{ item.name }}
</div>

// З використанням параметра length
<div v-for="(item, index, length) in items">
   {{ index + 1 }} of {{ length }}: {{ item.name }}
</div>

Діапазон v-range

<ul>
   <li v-range="1 to 5" v-as="i">
      Item {{ i }}
   </li>
</ul>

// Підтримується зворотний напрямок, від'ємні значення та step
<span v-range="5 to 1" v-as="i">{{i}}</span>
<span v-range="-3 to 3 step 2" v-as="i">{{i}}</span>