使用vuejs将文件夹的所有文件列出到容器的右侧

用户7411584

在我的应用程序中,我有文件夹列表,每个文件夹包含一些文件。选择特定文件夹时,我必须显示这些文件。这些文件夹将位于左侧。选择该文件夹时,文件将列在右侧。

我的json是这样的:

folders : [
        {id: 0, name: 'Animals', files:['cat.jpg','dog.jpg']},
        {id: 1, name: 'Birds',files:['crow.jpg','sparrow.jpg']},
        {id: 2, name: 'Area',files:['desert.jpg','river.jpg']}
    ]

因此,如果我选择“动物”文件夹,则右侧将列出两个文件。

像这些 :

文件夹文件设计

我是vuejs的新手。我怎样才能做到这一点?

马杰德·巴达维(Majed Badawi)

您可以在左侧列出文件夹,在右侧列出一个变量files,这些变量每次都会被单击的文件夹更新:

new Vue({
     el: '#app',
     data(){
          return{
               folders : [
                    {id: 0, name: 'Animals', files:['cat.jpg','dog.jpg']},
                    {id: 1, name: 'Birds',files:['crow.jpg','sparrow.jpg']},
                    {id: 2, name: 'Area',files:['desert.jpg','river.jpg']}
               ],
               files: []
          }
     },
     methods:{
          showFiles(id){
               let f = (this.folders).filter(f=>{return f.id==id})[0];
               this.files = f.files;
          }
     }
});
.folders {
    float: left;
    width: 50%;
}
.files {
    margin-left: 50%;
}
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="app">
     <div class="folders">
          <ul>
               <li v-for="(folder,index) in folders" :key="index">
                    <a @click="showFiles(folder.id)">{{folder.name}}</a>
               </li>
          </ul>
     </div>
     <div class="files">
          <ul>
               <li v-for="(file,index) in files" :key="index">
                    {{file}}
               </li>
          </ul>
     </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将文件夹中的所有文件和子文件夹列出到表中

我想使用azure storage api列出容器内的所有子文件夹

bash列出所有目录,子目录,文件夹,子文件夹,然后输出到单独的文件

使用 bash 列出所有文件夹和子文件夹

以cmd列出所有文件夹和子文件夹,但不列出文件

将文件夹中的所有文件“ docker cp”转移到现有容器文件夹中

如何列出tomcat文件夹中的所有文件?

列出R中没有子文件夹的文件夹中的所有文件

在Haxe的文件夹中查找并列出所有文件/文件夹

列出文件夹中的所有文件以及子文件夹

列出文件夹中的所有文件ID(无子文件夹)

使用 C# 在线列出 Sharepoint 上文件夹中的所有文件

使用Fabric8 Java库列出pod文件夹中的所有文件

在Yosemite上使用JavaScript for Automation列出文件夹中的所有文件

如何使用angular js列出文件夹中的所有文件名

使用.Net列出Google Drive V2中的所有文件和文件夹

Total.js CMS 将所有完整页面导出到文件夹

列出目录中的所有文件夹(PHP)

列出Jenkins下的所有文件夹及其路径

如何列出文件夹的所有属性

Dropbox Core API列出所有文件夹

列出网络位置中的所有共享文件夹

PowerShell - 列出 TreeView GUI 元素中的所有文件夹和子文件夹

如何将文件夹内的文件列出到表单并从那里启动?

使用fd列出主文件夹中的所有目录

如何使用 s3cmd 列出所有空文件夹

使用 Outlook MAPI 列出文件夹中的所有电子邮件

使用R将文件夹中的所有PDF和所有子文件夹复制到新文件夹

如何将所有不推荐使用的类列出到文件中?