Vue js如何使用laravel根据数据库值自动选择复选框

Question

我是前端新手，所以说起来有点困难，但这是我的问题。我有这个schedules 菜单或表格，在表格本身中它有一个violation 和remarks。这似乎很难向我解释我想要什么，但我会尝试。我有一个schedules 表，它与checkers 有关系，而跳棋与remarks 表有关系。备注表在数据库中有一个静态值，如At room、Present 等。我的问题是如何循环 vue 组件中的备注值并检查数据库中的备注。这是我的照片。

我的组件

所以基本上我得到的备注是正确的，但我想在数据库中显示其他备注而不检查，如果我有两个备注，两个复选框将被选中。但是，如果我在 DB 中有两条评论，它会加倍显示。

这是我的数据库

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

查询中包含的表

显示组件的代码 sn-p

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

我希望你能理解我的问题。感谢您的帮助。

Answer 1

这里是有关如何使用复选框 https://vuejs.org/v2/guide/forms.html#Checkbox 的文档。您应该将您的复选框修改为以下内容：

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