可选择具有特定用户角色的 Feed vue2

如何解决可选择具有特定用户角色的 Feed vue2

我正在开发一个培训系统，其中所有非管理员用户都具有此角色之一（coach 或 runner）。我正在使用 CoreUI 和 Vue 2 附带的 Craftable 包。我对 Vue 2 的了解是基本的（我需要进行一些升级）

我在用户表中添加了一个coach_id 外部字段，并在用户模型中建立了user 和user.coach_id 之间的关系。 Coach和Runner的关系如下：

教练可以有多个跑步者。
一名跑步者只属于一名教练。

这是外键声明：

Schema::table('users',function (Blueprint $table) {
    $table->unsignedInteger('coach_id')->nullable()->after('id');
    $table->foreign('coach_id')->references('id')->on('users')->onDelete('cascade');
});

所以在用户模型中，我添加了如下关系：

/**
 * Get related coach runners
 */
 public function runners(){
     return $this->hasMany(User::class,'coach_id');
 }

/**
 * Get related runner coach
 */
 public function coach(){
     return $this->belongsTo(AdminUser::class,'coach_id');
 }

添加外键后，我需要在用户创建表单上实现此关系。在 Craftable 文档中，有一些一对多关系示例，但不知道如何应用于我特定的一对多本身关系。

有关如何获取带有角色教练名称的 Vue 可选元素以及如何为其提供选项的任何线索？

PS：同时创建函数和 Vue2 视图选择部分...

return view('admin.admin-user.create',[
    'activation' => Config::get('admin-auth.activation_enabled'),'roles' => Role::where('guard_name',$this->guard)->get(),'coaches' => User::whereHas('roles',function($q){ $q->where('name','Coach'); })->get(),]);

<div class="form-group row align-items-center" :class="{'has-danger': errors.has('coaches'),'has-success': fields.coaches && fields.coaches.valid }">
    <label for="coaches" class="col-form-label text-md-right" :class="isFormlocalized ? 'col-md-4' : 'col-md-3'">{{ trans('admin.admin-user.columns.coaches') }}</label>
    <div :class="isFormlocalized ? 'col-md-4' : 'col-md-9 col-xl-7'">
        <multiselect v-model="form.coaches" placeholder="{{ trans('brackets/admin-ui::admin.forms.select_options') }}" label="name" track-by="id" :options="{{ $coaches->toJson() }}" :multiple="false" open-direction="bottom"></multiselect>
        <div v-if="errors.has('coaches')" class="form-control-Feedback form-text" v-cloak>@{{ errors.first('coaches') }}</div>
    </div>
</div>