Obtenez des données de la base de données via Vue.js, remplissez-les dans la zone de saisie et fournissez des options de sélection

Question

J'ai une application utilisant Laravel 8 et Vue 3. J'ai un composant appelé Student Component qui contient une liste de données répertoriant tous mes étudiants. Lorsque je clique sur cet étudiant, je souhaite que ma zone de saisie soit remplie de toutes les informations sur cet étudiant spécifique.

J'ai essayé d'utiliser Vue select, mais cela ne fonctionne qu'avec Vue 2, pas Vue 3. J'ai essayé Vue-next-select et cela devrait fonctionner pour Vue 3 mais lorsque je l'installe, il apparaît dans les dépendances de mon package.json mais lorsque je l'importe dans mon App.js, il est souligné et dit "Module non installé" et Je ne sais pas pourquoi.

Je veux donc trouver une solution pour que Vue-next-select le fasse fonctionner, ou toute autre solution pour le faire fonctionner.

这是我的代码：

// 这是我的app.js
importer {createApp, h} depuis 'vue' ;
importer {App en tant qu'InertiaApp, plugin en tant qu'InertiaPlugin} depuis '@inertiajs/inertia-vue3' ;
importer {InertiaProgress} depuis '@inertiajs/progress' ;
importer {createRouter, createWebHistory} depuis 'vue-router'
importer une session depuis "./Pages/Session" ;
importer la connexion depuis "./Pages/Auth/Login" ;
importer le tableau de bord depuis "./Pages/Dashboard" ;
importer VueNextSelect depuis 'vue-next-select'


require('./bootstrap');
window.Vue = require('vue');
const routes = [
    {
        chemin: '/',
        nom : 'connexion',
        composant : Connexion
    },
    {
        chemin : '/tableau de bord',
        nom : 'session',
        composant : Session,
    },
    {
        chemin : '/étudiant',
        nom : « étudiant »,
        composant : Tableau de bord,
    },
]

const routeur = créerRouter({
    historique : createWebHistory(),
    les itinéraires,
});
exporter le routeur par défaut ;
const el = document.getElementById('app');

laissez app = createApp({
    rendu : () =>
        h(InertieApp, {
            page initiale : JSON.parse (el.dataset.page),
            solveComponent : (nom) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({méthodes : {route}})
    .use (InertiaPlugin)
app.component('vue-select',VueNextSelect)
app.use (routeur)
app.mount(el);


InertiaProgress.init({couleur : '#4B5563'});

<!-- 这是我的student组件的一部分，这是我获取所有学生的datalist -->
<div class="search_trainee">
            <input id="search" class="search_trainee_input" list="stagiaires" placeholder=" "
                   type="texte">
            <label class="label_search" for="search">搜索一个学员</label>
            <datalist id="stagiaires">
                <option v-for="utilisateur chez les stagiaires" :key="user.id" :value="user">
                    {{ utilisateur.prénom }} {{ utilisateur.nom }}
                </option>
            </liste de données>
        </div>
        
        <!-- Il s'agit de la zone de saisie que je souhaite remplir avec les données des étudiants -->
        
        <div class="form_trainee">
            <h3 class=" title_form">Ajouter un élève</h3>
            <div class="ligne g-3">
                <div class="col-md-6">
                    <input id="nom" ref="nom" class="form-control"
                           name="nom" placeholder=" "
                           type="text" @blur.prevent="addTrainee();displayAudit()">
                    <label class="label_form" for="lastname">nom</label>
                </div>
                <div class="col-md-6">
                    <input id="firstname" ref="firstname" class="form-control" name="firstname" placeholder=" "
                           type="texte" @blur.prevent="update">
                    <label class="label_form" for="firstname">name</label>
                </div>
                <div class="col-md-6">
                    <input id="email" ref="email" class="form-control" name="email" placeholder=" " type="email"
                           @blur.prevent="mise à jour">
                    <label class="label_form" for="email">Email</label>

                </div>
                <div class="col-md-6">
                    <input id="entreprise" ref="entreprise" class="form-control" name="entreprise" placeholder=" "
                           type="texte"
                           @blur.prevent="mise à jour">
                    <label class="label_form" for="entreprise">entreprise</label>

                </div>
                <div class="col-md-6">
                    <input id="véhicule" ref="véhicule" class="form-control" name="véhicule" placeholder=" "
                           type="texte"
                           @blur.prevent="mise à jour">
                    <label class="label_form" for="véhicule">véhicule</label>

                </div>
                <div class="col-md-6">
                    <input id="emplacement" ref="emplacement" class="form-control" name="emplacement" placeholder=" "
                           type="texte"
                           @blur.prevent="mise à jour">
                    <label class="label_form" for="location">位置</label>

                </div>
                <div class="col-md-6">
                    <select id="instructor_id" ref="instructor_id" v-model="instructor" class="form-control"
                            nom="id_instructeur"
                            @blur.prevent="mise à jour">
                        <option value="">--选择一个教练--</option>
                        <option v-for="utilisateur dans les instructeurs" :key=user.id v-bind:value="{id:user.id}">                             {{utilisateur.prénom}}
                            {{utilisateur.nom de famille }}
                        </option>
                    </sélectionner>
                </div>
                <div class="col-md-6">
                    <select id="acpCenter" ref="acp_center_id" v-model="acpCenter" class="form-control" name="acpCenter"
                            @blur.prevent="mise à jour">
                        <option value="">--选择一个Acp中心--</option>
                        <option v-for="center in acpCenters" :key="center.id" v-bind:value=" {id:center.id}">
                            {{ center.city }} {{ center.postal_code }}
                        </option>
                    </sélectionner>
                </div>
            </div>
        </div>

如果需要，我可以提供更多的代码。 任何解决方案、建议或提示都会帮助我。 感谢您的时间。

Answer 1

Je vous recommande d'utiliser vue-multiselect

npm install vue-multiselect --save

Vous pouvez trouver la documentation officielle ici

https://vue-multiselect.js.org/#sub-getting-started

Pour utiliser n'importe quel composant comme composant global dans tous les composants

app.component('multiselect',require('vue-multiselect').default)