Get data from database via Vue.js, populate it into input box and provide selection options
<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>
