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

Question

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

我的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 的新手。我怎样才能做到这一点？

Answer 1

您可以在左侧列出文件夹，在右侧列出变量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>