Vue.js를 통해 데이터베이스에서 데이터를 가져와 입력 상자에 채우고 선택 옵션을 제공합니다.
P粉720716934
2023-08-26 18:21:11
<p>Laravel 8과 Vue 3을 사용하는 애플리케이션이 있습니다.
모든 학생을 나열하는 데이터 목록이 있는 Student Component라는 구성 요소가 있습니다.
이 학생을 클릭하면 입력 상자가 해당 특정 학생에 대한 모든 정보로 채워지기를 원합니다. </p>
<p>Vue select를 사용해 보았지만 Vue 3에서는 작동하지 않고 Vue 2에서만 작동합니다.
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
'vue'에서 {createApp, h}를 가져옵니다.
'@inertiajs/inertia-vue3'에서 {InertiaApp으로 앱, InertiaPlugin으로 플러그인}을 가져옵니다.
'@inertiajs/progress'에서 {InertiaProgress}를 가져옵니다.
'vue-router'에서 {createRouter, createWebHistory} 가져오기
"./Pages/Session"에서 세션을 가져옵니다.
"./Pages/Auth/Login"에서 로그인을 가져옵니다.
"./Pages/Dashboard"에서 대시보드를 가져옵니다.
'vue-next-select'에서 VueNextSelect 가져오기
require('./bootstrap');
window.Vue = require('vue');
const 경로 = [
{
길: '/',
이름: '로그인',
구성요소: 로그인
},
{
경로: '/대시보드',
이름: '세션',
구성요소: 세션,
},
{
경로: '/학생',
이름: '학생',
구성요소: 대시보드,
},
]
const 라우터 = createRouter({
기록: createWebHistory(),
경로,
});
기본 라우터 내보내기;
const el = document.getElementById('app');
앱 = createApp({
렌더링: () =>
h(관성앱, {
초기페이지: JSON.parse(el.dataset.page),
ResolveComponent: (이름) => require(`./Pages/${name}`).default,
}),
})
.mixin({방법: {경로}})
.use(관성 플러그인)
app.comComponent('vue-select',VueNextSelect)
app.use(라우터)
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=" "
유형="텍스트">
<label class="label_search" for="search">搜索一个school员</label>
<datalist id="연습생">
<option v-for="user in trainingee" :key="user.id" :value="user">
{{ 사용자.이름 }} {{ 사용자.성 }}
</옵션>
</데이터목록>
</div>
<!-- 이것은 학생 데이터로 채우려는 입력 상자입니다 -->
<div class="form_trainee">
<h3 class=" title_form">학생 추가</h3>
<div class="row g-3">
<div class="col-md-6">
<input id="성" ref="성" class="form-control"
name="성" 자리 표시자=" "
type="text" @blur.prevent="addTrainee();displayAudit()">
<label class="label_form" for="성">성</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">이름</label>
</div>
<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>
<div class="col-md-6">
<input id="회사" ref="회사" class="form-control" name="회사" placeholder=" "
유형="텍스트"
@blur.prevent="업데이트">
<label class="label_form" for="company">회사</label>
</div>
<div class="col-md-6">
<input id="vehicle" ref="vehicle" class="form-control" name="vehicle" placeholder=" "
유형="텍스트"
@blur.prevent="업데이트">
<label class="label_form" for="vehicle">차량</label>
</div>
<div class="col-md-6">
<input id="location" ref="location" class="form-control" name="location" placeholder=" "
유형="텍스트"
@blur.prevent="업데이트">
<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"
이름="강사_ID"
@blur.prevent="업데이트">
<옵션 값="">--选择一个教练--</option>
<option v-for="user in 강사" :key=user.id v-bind:value="{id:user.id}"> {{사용자.이름}}
{{사용자.성 }}
</옵션>
</선택>
</div>
<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 }}
</옵션>
</선택>
</div>
</div>
</p>
<p>저희는 더 많은 회사를 추천합니다.
任何解决方案、建议或提示city会帮助我。
感谢您的时间.</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
vue-multiselect 사용을 권장합니다
npm install vue-multiselect --save여기에서 공식 문서를 찾을 수 있습니다
https://vue-multiselect.js.org/#sub-getting-started
모든 구성요소를 전역 구성요소로 사용하려면
app.component('multiselect',require('vue-multiselect').default)