- 首页
- 前端开发
- Vue.js Fecth 数据从数据库使用选择选项填充输入
Vue.js Fecth 数据从数据库使用选择选项填充输入
[英] Vue.js Fecth data from database to fill input using select option
本文介绍了Vue.js Fecth 数据从数据库使用选择选项填充输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个使用 Laravel 8 和 Vue 3 的应用程序.我有那个学生组件，我有一个数据列表，其中列出了我所有的学生.我希望，当我点击该学生时，我的输入字段会填充与该特定学生相关的所有信息.
我已经尝试使用 Vue select 但它特定于 Vue 2 而不适用于 Vue 3.我尝试了 Vue-next-select，它应该可以与 Vue 3 一起使用，但是当我安装它时，它出现在我对 package.json 的依赖项中，但是当我将它导入我的 App.js 时，它是下划线，它说:"未安装模块我不知道为什么.
所以我想为 Vue-next-select 找到一个解决方案来使它工作，或者任何其他解决方案来使它工作.
这是我的代码:
//这是我的 app.js从'vue'导入{createApp，h}；从'@inertiajs/inertia-vue3'导入{App as InertiaApp，plugin as InertiaPlugin}；从@inertiajs/progress"导入 {InertiaProgress}；从vue-router"导入 {createRouter, createWebHistory}从./Pages/Session"导入会话；从./Pages/Auth/Login"导入登录；从./Pages/Dashboard"导入仪表板；从vue-next-select"导入 VueNextSelect要求('./bootstrap');window.Vue = require('vue');const 路由 = [{小路: '/'，name: '登录',组件:登录},{路径:'/仪表板'，名称:'会话'，组件:会话，},{路径:'/学生'，姓名:'学生',组件:仪表板，},]const 路由器 = createRouter({历史记录:createWebHistory()，路线，});导出默认路由器；const el = document.getElementById('app');让 app = createApp({渲染:() =>h(惯性应用，{initialPage: JSON.parse(el.dataset.page),解析组件:(名称)=>require(`./Pages/${name}`).default,}),}).mixin({方法:{路线}}).使用(惯性插件)app.component('vue-select',VueNextSelect)app.use(路由器)app.mount(el);InertiaProgress.init({color: '#4B5563'});
<!--这是我的学生组件的一部分，这是我获取所有学生的数据列表 --><div class="search_trainee"><input id="search" class="search_trainee_input" list="trainees" placeholder=""类型=文本"><label class="label_search" for="search">搜索学员</label><datalist id="学员"><option v-for="学员中的用户" :key="user.id" :value="user">{{ user.firstname }} {{ user.lastname }}</选项></数据列表>
<!--这是我想用我学生的数据填充的输入--><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"名称="姓氏"占位符=""type="text" @blur.prevent="addTrainee();displayAudit()"><label class="label_form" for="lastname">Lastname</label>
<div class="col-md-6"><input id="firstname" ref="firstname" class="form-control" name="firstname" placeholder=""type="text" @blur.prevent="更新"><label class="label_form" for="firstname">Firstname</label>
<div class="col-md-6"><input id="email" ref="email" class="form-control" name="email" placeholder=" " type="email"@blur.prevent="更新"><label class="label_form" for="email">电子邮件</label>
<div class="col-md-6"><input id="company" ref="company" class="form-control" name="company" placeholder=""类型=文本"@blur.prevent="更新"><label class="label_form" for="company">Company</label>
<div class="col-md-6"><input id="vehicle" ref="vehicle" class="form-control" name="vehicle" placeholder=""类型=文本"@blur.prevent="更新"><label class="label_form" for="vehicle">Vehicle</label>
<div class="col-md-6"><input id="location" ref="location" class="form-control" name="location" placeholder=""类型=文本"@blur.prevent="更新"><label class="label_form" for="location">Location</label>
<div class="col-md-6"><select id="instructor_id" ref="instructor_id" v-model="instructor" class="form-control"名称=instructor_id"@blur.prevent="更新"><option value="">--选择讲师--</option><option v-for="教师中的用户" :key=user.id v-bind:value="{id:user.id}">{{user.firstname}}{{user.lastname }}</选项></选择>
<div class="col-md-6"><select id="acpCenter" ref="acp_center_id" v-model="acpCenter" class="form-control" name="acpCenter"@blur.prevent="更新"><option value="">--选择一个 Acp 中心--</option><option v-for="center in acpCenters" :key="center.id" v-bind:value=" {id:center.id}">{{ center.city }} {{ center.postal_code }}</选项></选择>
如果需要，我可以提供更多代码.任何解决方案、任何建议或任何提示都会对我有所帮助.感谢您的时间
解决方案
我推荐你使用 vue-multiselect
npm install vue-multiselect --save
你可以在这里找到官方文档
https://vue-multiselect.js.org/#sub-getting-开始
为了在所有组件中使用任何组件作为全局组件
app.component('multiselect',require('vue-multiselect').default)
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
解决方案
I recommend you using 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)
这篇关于Vue.js Fecth 数据从数据库使用选择选项填充输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
