CODEWITHSUNDEEP
javascriptvue.jsvuejs2tree
learningMonk
learningMonk

Reputation: 1401

listout all the files of a folder to the right side of a container using vuejs

In my application, i have list of folders and each containing some files. I have to display those files while choosing particular folder. Those folder will be in left side.While selecting that folder, files will be listed out in right side.

my json is like this:

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']}
    ]

So if i choose 'Animals' folder then two files will be listed out in right side.

Like these :

folder file design

I am new to vuejs. How can i achieve this?

Upvotes: 1

Views: 573

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28414

You can list the folders on the left side and a variable files on the right side that would be updated by those of the clicked folder each time:

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>

Upvotes: 1

Related Questions