如何用从关系中获得的数据填充复选框

Question

我在 students 和 lessons 表之间使用多对多关系。多个学生可以有多个课程。关系很好。我可以通过选择带有复选框的课程来创建新记录，并且它们会相互关联。

但是当我需要编辑它们时，复选框的值应该被激活。

例如，如果现有学生有英语和数学课程，则应在该学生的编辑页面上激活复选框。应禁用其他复选框。

我可以毫无问题地在详细信息页面上显示数据透视表中的课程。但是这个问题阻止了我。我不知道该如何解决。

我使用 Student::with 从控制器获取数据并将其作为道具传递，然后在我的 Vue 组件中获取。

这就是我将关系和数据传递给编辑页面的方式

public function edit(Student $student)
    {
        $lessons = $student->lessons()->get();

        return view('edit')->with(['student' => $student, 'lessons' =>  $lessons]);
    }

如何获得道具：

<student-edit-component :student="{{$student}}" :lessons="{{$lessons}}">

</student-edit-component>

我在 Vue 组件中声明这样的 props：props: ['student','lessons']

我使用的一个复选框（每个复选框都相同，（值除外）

<div class="form-check form-check-inline mb-3">
    <input class="form-check-input" type="checkbox" value="4" v-model="selectedLessons">
    <label class="form-check-label">History</label>
</div>

很快，我的编辑页面上有 4 个复选框。如果现有学生正在学习数学和英语课程，则应在用户进入编辑页面时激活这些课程。

请帮帮我，谢谢！

Answer 1

使用pluck()代替get()方法；

$lessons = $student->lessons()->pluck('lession_id')->toArray();

它将返回一个数组，现在您可以检查该数组中是否存在值，如果存在，您可以将复选框标记为已选中