如何读取vue中文件的特定目录答案

【问题标题】：How to read specific directory for files in vue如何读取vue中文件的特定目录
【发布时间】：2020-07-01 16:15:06
【问题描述】：

我正在尝试创建一个简单的项目显示页面，您有一个项目列表页面，其中显示来自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 从根级别读取所有页面，还有$localePath 和$site.base，它们都等于/。

所以我的想法是，如果我可以将$site.base 更改为/projectslist，它应该只读取该文件夹中的.md 文件。

这是我的 vue 知识不足的地方，我似乎无法更改这些参数，我尝试在计算的 & 数据中捕获它们，但随后我收到一个错误，即它们未定义。

【问题讨论】：

标签： vue.js vuepress

【解决方案1】：

page 对象还应包含path 值。您可以过滤 $site.pages 以查找包含 projectslist/ 的路径。

    <ol>        
       <li v-for="page in $site.pages">
            <span v-if="page.path.includes('projectslist/')">
                {{ page.relativePath }}
            </span>
       </li>
   </ol>

【讨论】：

【解决方案2】：

虽然@Delen Malan 的帖子解决了我的问题，我发现在同一个元素上使用 v-for 和 v-if 不是一个好习惯

here's a more indepth explanation

因此，我最终对 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"，我们只在渲染期间迭代活动项目，从而提高渲染效率。

逻辑现在与表示层分离，使得维护（逻辑的更改/扩展）变得更加容易。

【讨论】：