Get data from database via Vue.js, populate it into input box and provide selection options

Question

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.

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.

So I want to find a solution for Vue-next-select to make it work, or any other solution to make it work.

这是我的代码：

// 这是我的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>
        
        <!-- 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>

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

Answer 1

I suggest you use vue-multiselect

npm install vue-multiselect --save

You can find the official documentation here

https://vue-multiselect.js.org/#sub-getting-started

In order to use any component as a global component in all components

app.component('multiselect',require('vue-multiselect').default)