vue js readdir

<template>
  <div>
    <ul>
      <li v-for="file in files" :key="file">{{ file }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
    };
  },
  mounted() {
    this.readDirectory();
  },
  methods: {
    async readDirectory() {
      try {
        const response = await this.$axios.get('/api/read-directory');
        this.files = response.data;
      } catch (error) {
        console.error('Error reading directory:', error);
      }
    },
  },
};
</script>

In this example:

1. The template section defines a simple Vue component with a list (ul) to display files.

2. The data function initializes a data property files to store the list of files.

3. The mounted lifecycle hook calls the readDirectory method when the component is mounted.

4. The readDirectory method is an asynchronous function that uses Axios (assumed as a plugin) to make a GET request to the '/api/read-directory' endpoint.

5. Upon a successful response, the files data property is updated with the list of files obtained from the server.

6. If there is an error during the GET request, an error message is logged to the console.

Note: Make sure to replace '/api/read-directory' with the actual endpoint that provides the list of files in your application.