我有一个使用Laravel 8和Vue 3的应用程序。 我有一个名为Student Component的组件，其中有一个datalist，列出了所有我的学生。 当我点击这个学生时，我希望我的输入框填充有关该特定学生的所有信息。

我已经尝试使用Vue select，但它只适用于Vue 2，不适用于Vue 3。 我尝试了Vue-next-select，它应该适用于Vue 3，但当我安装它时，在我的package.json的依赖项中出现，但当我在我的App.js中导入它时，它被下划线标记，并显示“模块未安装”，我不知道为什么。

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

这是我的代码：

// 这是我的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'});

<!-- 这是我的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>
        
        <!-- 这是我想要用学生数据填充的输入框 -->
        
        <div class="form_trainee">
            <h3 class=" title_form">添加一个学员</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">姓氏</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">名字</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">邮箱</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">公司</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">车辆</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="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="">--选择一个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>

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