Vue.js 経由でデータベースからデータを取得し、入力ボックスにデータを入力し、選択オプションを提供します

Question

<p>Laravel 8 と Vue 3 を使用するアプリケーションがあります。 Student Component というコンポーネントがあり、すべての生徒をリストするデータリストがあります。 この学生をクリックすると、入力ボックスにその特定の学生に関するすべての情報が入力されるようにしたいと考えています。 </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 'vue' から {createApp, h} をインポートします。 import {アプリを InertiaApp として、プラグインを InertiaPlugin として '@inertiajs/inertia-vue3' からインポートします。 '@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 ルート = [ { パス： '/'、 名前: 'ログイン'、 コンポーネント: ログイン }、 { パス: '/ダッシュボード'、 名前: 'セッション'、 コンポーネント: セッション、 }、 { パス: '/student'、 名前: '学生'、 コンポーネント: ダッシュボード、 }、 ] const router = createRouter({ 履歴: createWebHistory()、 ルート、 }); デフォルトルーターをエクスポートします。 const el = document.getElementById('app'); let app = createApp({ レンダリング: () => h(慣性App, { 初期ページ: JSON.parse(el.dataset.page)、 solveComponent: (名前) => require(`./Pages/${name}`).default, })、 }) .mixin({メソッド: {ルート}}) .use(慣性プラグイン) app.component('vue-select',VueNextSelect) app.use(ルーター) app.mount(el); InertiaProgress.init({color: '#4B5563'});</pre> <pre class="brush:html;toolbar:false;"><!-- これは私の学生コンポーネントの一部、これは私が获取したすべての学生のデータリストです --> <div class="検索_研修生"> <input id="search" class="search_trainee_input" list="研修生" プレースホルダー=" " type="テキスト"> <label class="label_search" for="search">搜索一个学员</label> <datalist id="研修生"> <option v-for="研修生のユーザー" :key="user.id" :value="user"> {{ ユーザー名 }} {{ ユーザー名 }} </オプション> </データリスト> </div> <!-- これは生徒データを入力したい入力ボックスです --> <div class="form_trainee"> <h3 class=" title_form">生徒を追加</h3> <div class="行 g-3"> <div class="col-md-6"> <input id="姓" ref="姓" class="フォームコントロール" 名前 = "姓" プレースホルダー = " type="text" @blur.prevent="addTrainee();displayAudit()"> <label class="label_form" for="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">name</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="company" ref="company" class="form-control" name="company" placeholder=" " type="テキスト" @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=" " type="テキスト" @blur.prevent="更新"> <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="テキスト" @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 value="">--选择一教练--</option> <option v-for="インストラクターのユーザー" :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="acpCenters のセンター" :key="center.id" v-bind:value=" {id:center.id}"> {{ center.city }} {{ center.postal_code }} </オプション> </選択> </div> </div> </div></pre> </p> <p>必要に応じて、さらに多くのコードを提供できます。 解決策、提案、提案があれば、私を助けてください。

Answer 1

vue-multiselect を使用することをお勧めします

npm install vue-multiselect --save

公式ドキュメントはここにあります

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

任意のコンポーネントをすべてのコンポーネントでグローバル コンポーネントとして使用するには

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