Как прочитать каталог c для файлов в vue - PullRequest
Новая
       50

Как прочитать каталог c для файлов в vue

0 голосов
/ 20 марта 2020

Я пытаюсь создать простую страницу отображения проекта, где у вас есть страница со списком проектов, в которой отображаются все сообщения из каталога Projects_List,

heres и пример того, что я пытаюсь воссоздать.

это моя структура папок: 

project
|-- .vuepress
|-- projectslist
|   |-- post1
|   `-- post2
|-- About.md
|-- ProjectsList.md
`-- theme
    `-- layouts
        |-- ProjectsList.vue
        `-- About.vue

Мы работаем в ProjectsList.vue

Я просматривал сайт с помощью инструментов VueDev и обнаружил, что vuepress отправляет эти данные: $site.pages, который является объектом массива 4, который включает все мои файлы .md.

Теперь, когда я запускаю этот код: 

    <ol>        
       <li v-for="page in $site.pages"> 
                {{ page.relativePath }}
       </li>
   </ol>

page.relativePath - это <pagename>.md

Я получаю вывод на своей странице: 

 1. About.md
 2. ProjectsList.md
 3. projectslist/post1.md
 4. projectslist/post2.md

Так что в основном $site.pages читает все страницы с root уровень, есть также $localePath и $site.base, которые оба равны /.

Так что я думаю, что если я могу изменить $site.base на /projectslist, он должен только читать .md файлов из этой папки.

вот где мои vue знания не хватает, я не могу изменить эти параметры, я пытался ловить g их в вычисленных & данных, но затем я получаю ошибку, что они не определены.

Ответы [ 2 ]

1 голос
/ 20 марта 2020

A page объект также должен содержать значение path. Вы можете отфильтровать $site.pages для путей, содержащих projectslist/. 

    <ol>        
       <li v-for="page in $site.pages" v-if="page.path.includes('projectslist/')">
            {{ page.relativePath }}
       </li>
   </ol>
0 голосов
/ 20 марта 2020

Хотя пост @Delen Malan решает мою проблему, я обнаружил, что использование v-for и v-if на одном и том же элементе не является хорошей практикой

вот более глубокое объяснение

Таким образом, вместо небольшой настройки метода Computed я в конечном итоге создал: 

        <li v-for="item in projectsList">
            <a href="#">
                {{ item.title }}
            </a>
        </li>

<script>
    export default {   
        computed: {
            projectsList() {                
                return this.$site.pages.filter(page => page.path.includes('projectslist/'));
            }   
        }
    }
</script>

Мы также получим следующие преимущества:

Отфильтрованный список будет только переоценка, если есть соответствующие изменения в массиве проектов, что делает фильтрацию намного более эффективной. Используя v-for = "item in projectsList", мы перебираем только активные проекты во время рендеринга, делая рендеринг намного более эффективным.

Logi c теперь отделен от уровня представления, что делает обслуживание (изменение / расширение логи c) намного проще.

...