Vue js how to auto select checkbox based on database value with laravel

Im new to frontend so its a bit difficult for me to tell but here is my problem. I have this schedules menu or table and in the table itself it has a violation and remarks. This seems hard to explain to me what I want but I will try. I got a schedules table and it has a relation to checkers and the checkers has a relation to remarks table. Remarks table got a static values in the database like At room, Present and ect.. My question is how I can i loop the remarks values in the vue component and checking the remarks that is in the database. Here are my pictures.

My Component

So basically the remarks that I got is correct but I want to show the other remarks in the database without check and if i got two remarks, two checkbox will be checked. But if i have two remarks in DB it doubles the display.

Here is my Database

The remarks_id is number 9 and the value of that is at lecture room which is correct.

I cant write my query because it is too long and i know it will difficult for you to understand but incase you want here it is

 //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);

The included tables in the query

Code snippet for the component shown

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

I hope you understand my problem. Thanks for help.

Answer

Here is the docs about how to work with checkboxes https://vuejs.org/v2/guide/forms.html#Checkbox . You should modify your checkboxes to something like this:

<input type="checkbox" id="checkbox" v-model="checked">

Advertisement

Answer