Dapatkan data daripada pangkalan data melalui Vue.js, isikannya ke dalam kotak input dan berikan pilihan pemilihan

Question

Saya mempunyai aplikasi menggunakan Laravel 8 dan Vue 3. Saya mempunyai komponen yang dipanggil Komponen Pelajar yang mempunyai senarai data yang menyenaraikan semua pelajar saya. Apabila saya mengklik pada pelajar ini, saya mahu kotak input saya diisi dengan semua maklumat tentang pelajar tertentu itu.

Saya telah mencuba menggunakan Vue select, tetapi ia hanya berfungsi dengan Vue 2, bukan Vue 3. Saya mencuba Vue-next-select dan ia sepatutnya berfungsi untuk Vue 3 tetapi apabila saya memasangnya ia muncul dalam dependensi package.json saya tetapi apabila saya mengimportnya dalam App.js saya, ia digariskan dan berkata "Modul tidak dipasang" dan Saya tidak tahu mengapa.

Jadi saya ingin mencari penyelesaian untuk Vue-next-select untuk menjadikannya berfungsi, atau sebarang penyelesaian lain untuk menjadikannya berfungsi.

这是我的代码：

// 这是我的app.js
import {createApp, h} daripada 'vue';
import {App as InertiaApp, plugin as InertiaPlugin} daripada '@inertiajs/inertia-vue3';
import {InertiaProgress} daripada '@inertiajs/progress';
import {createRouter, createWebHistory} daripada 'vue-router'
import Sesi daripada "./Pages/Session";
import Log Masuk daripada "./Pages/Auth/Login";
import Papan Pemuka daripada "./Pages/Dashboard";
import VueNextSelect daripada 'vue-next-select'


memerlukan('./bootstrap');
window.Vue = memerlukan('vue');
laluan const = [
    {
        laluan: '/',
        nama: 'log masuk',
        komponen: Log masuk
    },
    {
        laluan: '/papan pemuka',
        nama: 'sesi',
        komponen: Sesi,
    },
    {
        laluan: '/pelajar',
        nama: 'pelajar',
        komponen: Papan Pemuka,
    },
]

penghala const = createRouter({
    sejarah: createWebHistory(),
    laluan,
});
eksport penghala lalai;
const el = document.getElementById('app');

biarkan app = createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (nama) => memerlukan(`./Pages/${name}`). lalai,
        }),
})
    .mixin({kaedah: {laluan}})
    .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="pelatih">
                <pilihan v-for="pengguna dalam pelatih" :key="user.id" :value="pengguna">
                    {{ nama pertama pengguna }} {{ nama akhir pengguna }}
                </option>
            </datalist>
        </div>
        
        <!-- Ini ialah kotak input yang saya ingin isikan dengan data pelajar -->
        
        <div class="form_trainee">
            <h3 class=" title_form">Tambah pelajar</h3>
            <div class="row g-3">
                <div class="col-md-6">
                    <input id="lastname" ref="lastname" class="form-control"
                           name="lastname" placeholder=" "
                           type="text" @blur.prevent="addTrainee();displayAudit()">
                    <label class="label_form" for="lastname">last name</label>
                </div>
                <div class="col-md-6">
                    <input id="nama pertama" ref="nama pertama" class="form-control" name="nama pertama" pemegang tempat=" "
                           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">Emel</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="kenderaan" ref="kenderaan" 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">
                        <nilai pilihan="">--选择一个教练--</option>
                        <pilihan v-for="pengguna dalam pengajar" :key=user.id v-bind:value="{id:user.id}">                             {{user.firstname}}
                            {{user.nama keluarga }}
                        </option>
                    </select>
                </div>
                <div class="col-md-6">
                    <pilih id="acpCenter" ref="acp_center_id" v-model="acpCenter" class="form- control" name="acpCenter"
                            @blur.prevent="update">
                        <nilai pilihan="">--选择一个Acp中心--</option>
                        <pilihan 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

Saya mengesyorkan anda menggunakan vue-multiselect

npm install vue-multiselect --save

Anda boleh mendapatkan dokumentasi rasmi di sini

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

Untuk menggunakan mana-mana komponen sebagai komponen global dalam semua komponen

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