<p>我有一個使用Laravel 8和Vue 3的應用程式。
我有一個名為Student Component的元件，其中有一個datalist，列出了所有我的學生。
當我點擊這位學生時，我希望我的輸入框填充有關該特定學生的所有資訊。 </p>
<p>我已經嘗試使用Vue select，但它只適用於Vue 2，不適用於Vue 3。
我嘗試了Vue-next-select，它應該適用於Vue 3，但當我安裝它時，在我的package.json的依賴項中出現，但當我在我的App.js中導入它時，它被下劃線標記，並顯示“模組未安裝”，我不知道為什麼。 </p>
<p>所以我想找到Vue-next-select的解決方案，使其工作，或任何其他使其工作的解決方案。</p>
<p>這是我的程式碼：</p>
<p>
//這是我的app.js
從“vue”導入{createApp，h}；
從'@inertiajs/inertia-vue3'導入{App作為InertiaApp，插件作為InertiaPlugin}；
從 '@inertiajs/progress' 導入 {InertiaProgress}；
從 'vue-router' 匯入 {createRouter, createWebHistory}
從“./Pages/Session”導入會話；
從“./Pages/Auth/Login”匯入登入名；
從“./Pages/Dashboard”導入儀表板；
從 'vue-next-select' 導入 VueNextSelect
需要('./bootstrap');
window.Vue = require('vue');
常量路由 = [
{
小路： '/'，
名稱：'登入'，
組件：登入
},
{
路徑：'/儀表板'，
名稱：'會話'，
元件：會話，
},
{
路徑：'/學生'，
姓名：'學生'，
組件：儀表板，
},
]
常數路由器 = createRouter({
歷史記錄：createWebHistory(),
路線，
});
匯出預設路由器；
const el = document.getElementById('app');
讓應用程式=創建應用程式（{
渲染：() =>
h(慣性應用程式, {
初始頁面：JSON.parse(el.dataset.page),
解析組件：（名稱）=> require(`./Pages/${name}`).default,
}),
})
.mixin({方法: {路由}})
.use(慣性插件)
app.component('vue-select',VueNextSelect)
應用程式使用（路由器）
應用程式掛載(el);
InertiaProgress.init({color: '#4B5563'});;
<這是pre class="brush:html;toolbar:false;">
<div class="search_trainee">
<datalist id="受訓者">
;
<!-- 這是我想要用學生資料填滿的輸入框 -->
<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">
<輸入id =“位置”參考=“位置”類別=“表單控制”名稱=“位置”佔位符=“”
類型=“文字”
@blur.prevent="更新">
我建議你用vue-multiselect
#npm install vue-multiselect --save
你可以在這裡找到官方文件https://vue-multiselect.js.org/#sub-getting-started
為了在所有元件中使用任何元件作為全域元件
####app.component('multiselect',require('vue-multiselect').default)