Display the files contained within a folder on the right side of a container by utilizing vue.js

Question

Display the files contained within a folder on the right side of a container by utilizing vue.js

I am currently working on an application that involves a list of folders, each containing various files. The goal is to display these files when a specific folder is chosen. On the left side, users will see a list of folders and on the right side, the respective files will be displayed upon selection.

My JSON data structure looks 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']}
    ]

For example, if the user selects the 'Animals' folder, they will see two files listed on the right side.

Here's a visual representation:

https://i.sstatic.net/fXx0c.png

As someone new to Vue.js, I'm curious about how to implement this functionality. Any guidance would be much appreciated!

javascript vue.js vuejs2 tree

Answer 1

Answer №1

If you want to display folders on the left side and have a variable called files on the right side that updates whenever a folder is clicked, you can use the following Vue.js code:

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>

Answer 2

If you want to display folders on the left side and have a variable called files on the right side that updates whenever a folder is clicked, you can use the following Vue.js code:

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>

Display the files contained within a folder on the right side of a container by utilizing vue.js

Answer №1

Similar questions

issue arising from integrating material-ui components with code in a react javascript application

invoking a jquery method through the onClick event handler

Effortlessly move and place items across different browser windows or tabs

When json.parse encounters an undefined value at position 1

Guidelines for attaching a div to the bottom of a page?

Guide on utilizing JavaScript to modify the attribute of a chosen web element with Selenium WebDriver in Java

Is it possible to use an Ajax callback function to add a select dropdown HTML to a table

Exploring the global document object within Next.js

Troubleshooting Autocomplete User Interface Problems

Formatting dates in a C# MVC application after parsing JSON

Clicking on the React Bootstrap Checkbox within the Nav component does not trigger a rerender of the NavItem component

Retrieving CSV information from several files within a JavaScript directory

Verify the ability to view a webpage

Error message displayed: "An error occurred while processing the VueJS InertiaJS Uncaught (in promise) TypeError. It seems that the property 'search'

Ways to verify if a JavaScript file has been successfully downloaded to the client's side

Looking to incorporate new values without replacing them in react.js and mongoDB

How to message someone privately in a public Discord channel using discord.js

Creating sitemaps for multi domain websites using NextJS

How can I assign integer values to specific child elements after splitting them?

Error Loading JQuery: The function $() is not recognized in the Shopify platform