Rufen Sie Daten über Vue.js aus der Datenbank ab, füllen Sie sie in das Eingabefeld ein und stellen Sie Auswahloptionen bereit

Question

Ich habe eine Anwendung, die Laravel 8 und Vue 3 verwendet. Ich habe eine Komponente namens Student Component, die eine Datenliste enthält, die alle meine Studenten auflistet. Wenn ich auf diesen Schüler klicke, möchte ich, dass mein Eingabefeld mit allen Informationen zu diesem bestimmten Schüler gefüllt wird.

Ich habe versucht, Vue Select zu verwenden, aber es funktioniert nur mit Vue 2, nicht mit Vue 3. Ich habe Vue-next-select ausprobiert und es sollte für Vue 3 funktionieren, aber wenn ich es installiere, erscheint es in den Abhängigkeiten meiner package.json, aber wenn ich es in meine App.js importiere, ist es unterstrichen und sagt „Modul nicht installiert“ und Ich weiß nicht warum.

Ich möchte also eine Lösung für Vue-next-select finden, damit es funktioniert, oder eine andere Lösung, damit es funktioniert.

这是我的代码：

// Erweitern Sie app.js
importiere {createApp, h} aus 'vue';
import {App as InertiaApp, Plugin as InertiaPlugin} von '@inertiajs/inertia-vue3';
importiere {InertiaProgress} aus '@inertiajs/progress';
Importiere {createRouter, createWebHistory} aus 'vue-router'
Sitzung aus „./Pages/Session“ importieren;
Login importieren von „./Pages/Auth/Login“;
Dashboard aus „./Pages/Dashboard“ importieren;
VueNextSelect aus 'vue-next-select' importieren


require('./bootstrap');
window.Vue = require('vue');
const Routen = [
    {
        Weg: '/',
        Name: 'Anmelden',
        Komponente: Anmelden
    },
    {
        Pfad: '/dashboard',
        Name: 'Sitzung',
        Komponente: Sitzung,
    },
    {
        Pfad: '/student',
        Name: 'Student',
        Komponente: Dashboard,
    },
]

const router = createRouter({
    Geschichte: createWebHistory(),
    Routen,
});
Standardrouter exportieren;
const el = document.getElementById('app');

let app = createApp({
    rendern: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            auflösenKomponente: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({methods: {route}})
    .use(InertiaPlugin)
app.component('vue-select',VueNextSelect)
app.use(Router)
app.mount(el);


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

<!-- 这是我的student组件的一部分，这是我获取所有学生的datalist -->
<div class="search_trainee">
            <input id="search" class="search_trainee_input" list="trainees" placeholder=" "
                   type="text">
            <label class="label_search" for="search">搜索一个学员</label>
            <datalist id="trainees">
                <option v-for="user in trainees" :key="user.id" :value="user">
                    {{ user.firstname }} {{ user.lastname }}
                </option>
            </datalist>
        </div>
        
        <!-- Dies ist das Eingabefeld, das ich mit Studentendaten füllen möchte -->
        
        <div class="form_trainee">
            <h3 class=" title_form">Schüler hinzufügen</h3>
            <div class="row g-3">
                <div class="col-md-6">
                    <input id="lastname" ref="lastname" class="form-control"
                           name="Nachname" Platzhalter=" "
                           type="text" @blur.prevent="addTrainee();displayAudit()">
                    <label class="label_form" for="lastname">last name</label>
                </div>
                <div class="col-md-6">
                    <input id="firstname" ref="firstname" class="form-control" name="firstname" placeholder=" "
                           type="text" @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="update">
                    <label class="label_form" for="email">E-Mail</label>

                </div>
                <div class="col-md-6">
                    <input id="company" ref="company" class="form-control" name="company" placeholder=" "
                           type="text"
                           @blur.prevent="update">
                    <label class="label_form" for="company">company</label>

                </div>
                <div class="col-md-6">
                    <input id="vehicle" ref="vehicle" class="form-control" name="vehicle" placeholder=" "
                           type="text"
                           @blur.prevent="update">
                    <label class="label_form" for="vehicle">vehicle</label>

                </div>
                <div class="col-md-6">
                    <input id="location" ref="location" class="form-control" name="location" placeholder=" "
                           type="text"
                           @blur.prevent="update">
                    <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"
                            name="instructor_id"
                            @blur.prevent="update">
                        <option value="">--选择一个教练--</option>
                        <option v-for="Benutzer in Lehrern" :key=user.id v-bind:value="{id:user.id}">                             {{user.firstname}}
                            {{user.lastname }}
                        </option>
                    </select>
                </div>
                <div class="col-md-6">
                    <select id="acpCenter" ref="acp_center_id" v-model="acpCenter" class="form-control" name="acpCenter"
                            @blur.prevent="update">
                        <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>
                    </select>
                </div>
            </div>
        </div>

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

Answer 1

我建议你使用vue-multiselect

npm install vue-multiselect --save

你可以在这里找到官方文档

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

为了在所有组件中使用任何组件作为全局组件

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