通过Vue.js从数据库中获取数据,将其填充到输入框中并提供选择选项
P粉720716934
P粉720716934 2023-08-26 18:21:11
[Vue.js讨论组]
<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> <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: () =&gt; h(InertiaApp, { initialPage: JSON.parse(el.dataset.page), resolveComponent: (name) =&gt; 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;">&lt;!-- 这是我的student组件的一部分,这是我获取所有学生的datalist --&gt; &lt;div class="search_trainee"&gt; &lt;input id="search" class="search_trainee_input" list="trainees" placeholder=" " type="text"&gt; &lt;label class="label_search" for="search"&gt;搜索一个学员&lt;/label&gt; &lt;datalist id="trainees"&gt; &lt;option v-for="user in trainees" :key="user.id" :value="user"&gt; {{ user.firstname }} {{ user.lastname }} &lt;/option&gt; &lt;/datalist&gt; &lt;/div&gt; &lt;!-- 这是我想要用学生数据填充的输入框 --&gt; &lt;div class="form_trainee"&gt; &lt;h3 class=" title_form"&gt;添加一个学员&lt;/h3&gt; &lt;div class="row g-3"&gt; &lt;div class="col-md-6"&gt; &lt;input id="lastname" ref="lastname" class="form-control" name="lastname" placeholder=" " type="text" @blur.prevent="addTrainee();displayAudit()"&gt; &lt;label class="label_form" for="lastname"&gt;姓氏&lt;/label&gt; &lt;/div&gt; &lt;div class="col-md-6"&gt; &lt;input id="firstname" ref="firstname" class="form-control" name="firstname" placeholder=" " type="text" @blur.prevent="update"&gt; &lt;label class="label_form" for="firstname"&gt;名字&lt;/label&gt; &lt;/div&gt; &lt;div class="col-md-6"&gt; &lt;input id="email" ref="email" class="form-control" name="email" placeholder=" " type="email" @blur.prevent="update"&gt; &lt;label class="label_form" for="email"&gt;邮箱&lt;/label&gt; &lt;/div&gt; &lt;div class="col-md-6"&gt; &lt;input id="company" ref="company" class="form-control" name="company" placeholder=" " type="text" @blur.prevent="update"&gt; &lt;label class="label_form" for="company"&gt;公司&lt;/label&gt; &lt;/div&gt; &lt;div class="col-md-6"&gt; &lt;input id="vehicle" ref="vehicle" class="form-control" name="vehicle" placeholder=" " type="text" @blur.prevent="update"&gt; &lt;label class="label_form" for="vehicle"&gt;车辆&lt;/label&gt; &lt;/div&gt; &lt;div class="col-md-6"&gt; &lt;input id="location" ref="location" class="form-control" name="location" placeholder=" " type="text" @blur.prevent="update"&gt; &lt;label class="label_form" for="location"&gt;位置&lt;/label&gt; &lt;/div&gt; &lt;div class="col-md-6"&gt; &lt;select id="instructor_id" ref="instructor_id" v-model="instructor" class="form- control" name="instructor_id" @blur.prevent="update"&gt; &lt;option value=""&gt;--选择一个教练--&lt;/option&gt; &lt;option v-for="user in instructors" :key=user.id v-bind:value="{id:user.id}"&gt; {{user.firstname}} {{user.lastname }} &lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="col-md-6"&gt; &lt;select id="acpCenter" ref="acp_center_id" v-model="acpCenter" class="form- control" name="acpCenter" @blur.prevent="update"&gt; &lt;option value=""&gt;--选择一个Acp中心--&lt;/option&gt; &lt;option v-for="center in acpCenters" :key="center.id" v-bind:value=" {id:center.id}"&gt; {{ center.city }} {{ center.postal_code }} &lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> </p> <p>如果需要,我可以提供更多的代码。 任何解决方案、建议或提示都会帮助我。 感谢您的时间。</p>
P粉720716934
P粉720716934

全部回复(1)
P粉232409069

我建议你使用vue-multiselect

npm install vue-multiselect --save

你可以在这里找到官方文档

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

为了在所有组件中使用任何组件作为全局组件

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号