Vue.js 从数据库中获取数据以使用选择选项填充输入

Question

我有一个使用 Laravel 8 和 Vue 3 的应用程序。 我有那个学生组件，我有一个数据列表，其中列出了我所有的学生。 我希望，当我点击那个学生时，我的输入字段会填满与那个特定学生相关的所有信息。

我已经尝试使用 Vue select，但它特定于 Vue 2，不适用于 Vue 3。 我尝试了 Vue-next-select，它应该可以与 Vue 3 一起使用，但是当我安装它时，它出现在我对 package.json 的依赖项中，但是当我将它导入我的 App.js 时，它带有下划线并且它说：“模块没有安装"，我不知道为什么。

所以我想为 Vue-next-select 找到一个解决方案以使其工作，或任何其他解决方案来使其工作。

这是我的代码：

// This is my app.js
import {createApp, h} from 'vue';
import {App as InertiaApp, plugin as InertiaPlugin} from '@inertiajs/inertia-vue3';
import {InertiaProgress} from '@inertiajs/progress';
import {createRouter, createWebHistory} from 'vue-router'
import Session from "./Pages/Session";
import Login from "./Pages/Auth/Login";
import Dashboard from "./Pages/Dashboard";
import VueNextSelect from 'vue-next-select'


require('./bootstrap');
window.Vue = require('vue');
const routes = [
    {
        path: '/',
        name: 'login',
        component: Login
    },
    {
        path: '/dashboard',
        name: 'session',
        component: Session,
    },
    {
        path: '/student',
        name: 'student',
        component: Dashboard,
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes,
});
export default router;
const el = document.getElementById('app');

let app = createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (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'});

<!--This is a part of my student component, this is the datalist where I get all my student -->
<div class="search_trainee">
            <input  id="search" class="search_trainee_input" list="trainees" placeholder=" "
                   type="text">
            <label class="label_search" for="search">Search a trainee</label>
            <datalist  id="trainees">
                <option v-for="user in trainees" :key="user.id" :value="user">
                    {{ user.firstname }} {{ user.lastname }}
                </option>
            </datalist>
        </div>
        
        <!--And this are the input I want to be fill with the data of my student-->
        
        <div class="form_trainee">
            <h3 class=" title_form">Add a trainee</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">Lastname</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">Firstname</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">Email</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">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="">--Choose an instructor--</option>
                        <option v-for="user in instructors" :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="">--Choose an Acp Center--</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)