I have an application using Laravel 8 and Vue 3 . I have that Student Component and I have a datalist where all my student are listed. I would like, when I click on that student, that my input field are fill with all the informations relative to that specific student.
I already tried to use Vue select but it's specific to Vue 2 and not working with Vue 3. I tried Vue-next-select that is suppose to work with Vue 3 but when I installed it, it appear in my dependencies on package.json BUT when I import it on my App.js, it's underline and it says that : "Module is not installed " and I don't know why.
So I would like to find a solution for Vue-next-select to make it work, or any other solution to make this work.
There's my code :
// This is my 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'});<!--This is a part of my student component, this is the datalist where I get all my student -->
<div class="search_trainee">
<input id="search" class="search_trainee_input" list="trainees" placeholder=" "
type="text">
<label class="label_search" for="search">Search a trainee</label>
<datalist id="trainees">
<option v-for="user in trainees" :key="user.id" :value="user">
{{ user.firstname }} {{ user.lastname }}
</option>
</datalist>
</div>
<!--And this are the input I want to be fill with the data of my student-->
<div class="form_trainee">
<h3 class=" title_form">Add a trainee</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">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">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">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">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="">--Choose an instructor--</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="">--Choose an Acp Center--</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>I can provide more code if needed. Any solution, any advice or any tip would help me. Thanks for your time
