Я новичок во внешнем интерфейсе, поэтому мне сложно сказать, но вот моя проблема. У меня есть это schedules меню или таблица, и в самой таблице есть violation и remarks. Кажется, мне сложно объяснить, чего я хочу, но я постараюсь. Я получил таблицу schedules, и она имеет отношение к checkers, а шашки имеют отношение к таблице remarks. Таблица примечаний получила значения c в базе данных, такие как At room, Present и т. Д. Мой вопрос заключается в том, как я могу сделать значения oop в компоненте vue и проверить замечания в база данных. Вот мои рисунки.
Мой компонент 
Так что в основном замечания, которые я получил, правильные, но я хочу показать другие замечания в базе данных без проверки и если я получил два замечания, будут отмечены два флажка. Но если у меня есть два замечания в БД, это удваивает отображение.
Вот моя база данных 
remarks_id - это число 9, и значение at lecture room является правильным.
Я не могу написать свой запрос, потому что он слишком длинный, и я знаю, что вам будет трудно его понять, но если вы хотите, чтобы он был здесь, это
//schedule_id
$scid = $request->id;
$round = \DB::table('rounds')
->select('rounds.*','checkers.*','remarks.*','violations.*')
->join('checkers','checkers.id','=','rounds.checker_id')
->join('checker_details','rounds.id','=','checker_details.round_id')
->join('remarks','remarks.id','=','rounds.remarks_id')
->join('violations','violations.id','=','checker_details.violation_id')
->where('checkers.schedule_id',$scid)
->where('rounds.round_no','=',1)
->distinct('rounds.remarks_id')
->get();
return response()->json($round);
Включенные в запрос таблицы 
Фрагмент кода для показанного компонента
<div class="row" v-for="detail in details" :key="detail.id">
<div class="col-xs-3">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Violations</h3>
</div>
<div class="box-body">
<div class="form-group">
<input class="form-check-input" checked="checked"
type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
{{detail.violation_details}}
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Remarks</h3>
</div>
<div class="box-body">
<div class="form-group">
<input class="form-check-input" checked="checked"
type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
{{detail.remarks_desc}}
</label>
</div>
</div>
</div>
</div>
</div>
Надеюсь, вы понимаете мою проблему. Спасибо за помощь.