<p>I have an application using Laravel 8 and Vue 3. I have a component called Student Component which has a datalist that lists all my students. When I click on this student, I want my input box to be filled with all the information about that specific student. </p> <p>I've tried using Vue select, but it only works with Vue 2, not Vue 3. I tried Vue-next-select and it should work with Vue 3 but when I install it it appears in the dependencies of my package.json but when I import it in my App.js it is underlined and says "Module not installed" and I don't know why. </p> <p>So I want to find a solution for Vue-next-select to make it work, or any other solution to make it work.</p> <p>这是我的代码：</p> <p> <pre class="brush:js;toolbar:false;">// 这是我的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'});</pre> <pre class="brush:html;toolbar:false;"><!-- 这是我的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> <!-- This is the input box I want to populate with student data --> <div class="form_trainee"> <h3 class=" title_form">Add a student</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="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">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">位置</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></pre> </p> <p>如果需要，我可以提供更多的代码。 任何解决方案、建议或提示都会帮助我。 感谢您的时间。</p>