[Vuejs]-Loop through files in folder and print html content based on the files

by

3👍

✅

Before providing my answer to your question, I would recommend you take a step back and learn the basics of Laravel before you add additional complexity by using other technologies alongside Laravel. This is just a suggestion and you’re on your own learning journey but trying to learn too many things simultaneously can be overwhelming.

Anyway, onward.

Rather than answering your question directly, I’m going to provide a basic example of how you might read, and loop over its contents of a directory. You can then then adapt it for your needs.

Given you have a route defined in your routes/web.php file that you’ll navigate to in order to show some files:

routes/web.php

Route::get('/', function () {
    // Using Laravels built in storage helper,
    // get all the files in the 'public/projects/images' folder
    // NOTE: the 'public' folder is symlinked to 'storage',
    // add files to 'storage' rather than 'public'
    $files = Illuminate\Support\Facades\Storage::disk('public')->listContents('projects/images');

    // display a view and pass the files to the view
    return view('file-list', compact('files'));
});

Normally the above would be performed in a controller, but I’ve added it in a route for ease.

resources/views/file-list.blade.php

If you were keeping things really simple and just wanted to use Blade to start with, you might do the following:

<ul>
    @foreach ($files as $file)
        <li>{{ $file['basename'] }}</li>
    @endforeach
</ul>

The $files variable which was passed to the view is an array, so we loop over the $files referring to each element in the $files array as $file (which is also an array) and for each $file element, we display its filename (basename). The other indexes available on $file are:

  "type" => "file"
  "path" => "projects/images/de.jpg"
  "timestamp" => 1621078308
  "size" => 0
  "dirname" => "projects/images"
  "basename" => "de.jpg"
  "extension" => "jpg"
  "filename" => "de"

Note that @foreach is a Blade directive.

I am going to assume you already have Vue installed in your Laravel application, and you know how to add Vue components.

Create yourself a new Vue component somewhere, for example resources/js/components/FileListComponent.vue and register it with your Vue instance. Inside your component add the following:

<template>
  <ul id="files-list">
    <li v-for="(file, index) in files" :key="index">
        {{ file.basename }}
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    files: Object,
  }
};
</script>

What we have done is create a Vue component that expects a files prop which will be the $files we obtained earlier and we will provide it when we use the component. Using the files prop, we loop over the files using v-for (which provides equivalent functionality to @foreach/@for in Blade) and display the filename for each element just as before.

To use the component, add the component to the resources/views/file-list.blade.php view created earlier and provide the files prop:

<file-list-component :files="{{ json_encode($files) }}" />

Assuming you’ve done everything correctly, you should be shown the same output as before or as well as if you still have the @foreach in the blade view.

👤Peppermintology

Leave a comment