<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>