MusicTopus/views/pages/ajouter-un-album/search.ejs

<div class="container" id="app">
    <form @submit="search">
        <div class="field has-addons">
            <div class="control">
                <input class="input" type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory">
            </div>
            <div class="control">
                <button class="button is-link" :disabled="loading">
                    <span class="icon">
                        <i class="fas fa-search"></i>
                      </span>
                </button>
            </div>
        </div>
    </form>
    <table class="table is-striped is-hoverable is-fullwidth">
        <thead>
            <tr>
                <th>Pochette</th>
                <th>Titre</th>
                <th>Pays</th>
                <th>Année</th>
                <th>Format</th>
                <th>Genres</th>
                <th>Styles</th>
            </tr>
        </thead>
        <tbody>
            <tr v-if="loading">
                <td colspan="7">
                    Chargement en cours…
                </td>
            </tr>
            <tr v-for="item in items">
                <td>
                    <img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
                </td>
                <td>
                    <a :href="'/ajouter-un-album/' + item.id">{{ item.title }}</a>
                </td>
                <td>{{ item.year }}</td>
                <td>{{ item.country }}</td>
                <td>
                    <ul>
                        <li v-for="format in item.format">{{ format }}</li>
                    </ul>                    
                </td>
                <td>
                    <ul>
                        <li v-for="genre in item.genre">{{ genre }}</li>
                    </ul>
                </td>
                <td>
                    <ul>
                        <li v-for="style in item.style">{{ style }}</li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                q: '',
                loading: false,
                items: [],
            }
        },
        methods: {
            search(event) {
                event.preventDefault();

                if ( this.loading ) {
                    return false;
                }

                this.loading = true;

                axios.get(`/api/v1/search?q=${this.q}`)
                    .then( response => {
                        const {
                            results,
                        } = response.data;
                        let items = [];

                        for (let i = 0 ; i < results.length ; i += 1 ) {
                            const {
                                id,
                                title,
                                thumb,
                                year,
                                country,
                                format,
                                genre,
                                style,
                            } = results[i];
                            items.push({
                                id,
                                title,
                                thumb,
                                year,
                                country,
                                format,
                                genre,
                                style,
                            });
                        }

                        this.items = items;
                    })
                    .catch((err) => {
                        showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            }
        }
    }).mount('#app')
  </script>