Не загружается асинхронно данные от бекэнда vue

Question

Vue.component('pages-port', {
    template: `
    <div class="col-6 col-xl-3 p-1"> 
        <div class="card bg-dark text-white">
                <img src="{{ file }}" alt="">
                <div class="card-img-overlay">
                    <h4 class="card-title"> {{title}} </h4>
                    <h5 class="card-title">{{subtitle}}</h5>
                    <a class="card-link" href="{{ htmlFile }}"> Посмотреть подробнее </a>
                </div>
        </div>
    </div>
    `,
    props: ["id", "title", "subtitle", "file", "htmlFile"]
})
let app = new Vue({
    el: "#app",
    data: {
        pages: []
    },
    computed: {
        loadPages: async function () {
            let resPages = await fetch("/api/v1/showAll/pages");
            let jsonPages = await resPages.json();
            console.log(resPages, jsonPages, this.pages);
            for (let i = 0; i < jsonPages.lenght; i++) {
                this.pages.push({
                    id: jsonPages.data[i], 
                    title: jsonPages.data[i].title,
                    subtitle: jsonPages.data[i].subtitle,
                    file: jsonPages.data[i].file,
                    htmlFile: `./${jsonPages.data[i].title}.html`
                })
            }
        }
    }
})  ``
main js


``
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css"><!-- connect self style's-->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/portfolio.css">
</head>

<body>
    <header class="header mb-xl-5">
        <p class="text-center">test</p>
    </header>
    <div class="wrapper">
        <main class="main">
            <div id="app">
                <h1 class="text-center header-text">ПОРТФОЛИО</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center">
                        <li class="breadcrumb-item">
                            <button class="btn btn-link">Все проекты</button>
                        </li>
                        <li class="breadcrumb-item">
                            <button class="btn btn-link">ДНИ РОЖДЕНИЯ </button>
                        </li>
                        <li class="breadcrumb-item">
                            <button class="btn btn-link">Показы</button>
                        </li>
                        <li class="breadcrumb-item">
                            <button class="btn btn-link">Свадьбы</button>
                        </li>
                        <li class="breadcrumb-item">
                            <button class="btn btn-link">Светское событие</button>
                        </li>
                        <li class="breadcrumb-item">
                            <button class="btn btn-link">Сезонное оформление</button>
                        </li>
                    </ol>
                </nav>
                <div is="pages-port" v-for="(item) in pages" :id="item.id" :title="item.title" :subtitle="item.subtitle"
                :file="item.file" :htmlFile="item.html" ref="page">
                </div>
                <!-- <pages-port v-for="(item) in pages" :id="item.id" :title="item.title" :subtitle="item.subtitle"
                :file="item.file" :htmlFile="item.html"></pages-port> -->
            </div>
        </main>
    </div>
    <footer class="footer">
        <p>test</p>
    </footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./js/portfolio/main.js"></script>

</html>

index.html Извиняюсь за неправильный вид вопроса, заранее! Использовался vue2 Нужно чтобы без нажатия кнопки асинхронно добавлялись статьи!

БЛОГ НА HUSL

Не загружается асинхронно данные от бекэнда vue

Ответы (0 шт):