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

Posted

技术标签:

【中文标题】Vue js如何使用laravel根据数据库值自动选择复选框【英文标题】:Vue js how to auto select checkbox based on database value with laravel 【发布时间】:2020-05-05 18:30:20 【问题描述】:

我是前端新手,所以说起来有点困难,但这是我的问题。我有这个schedules 菜单或表格,在表格本身中它有一个violationremarks。这似乎很难向我解释我想要什么,但我会尝试。我有一个schedules 表,它与checkers 有关系,而跳棋与remarks 表有关系。备注表在数据库中有一个静态值,如At roomPresent 等。我的问题是如何循环 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>

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

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

@Vince ,我犯了错误。等我修好了。 先生,我们可以聊聊吗? @Vince,是的,我们可以。 你有 Skype 或其他可以聊天的东西吗? 我们可以在 vuejs 聊天或 slack 聊天中进行。

以上是关于Vue js如何使用laravel根据数据库值自动选择复选框的主要内容,如果未能解决你的问题,请参考以下文章

Vue JS如何根据传递的嵌套v-for值设置选项?

如何从 Vue 组件访问值?

根据Laravel Vue Js Api中的关系从多个表中删除数据

在 Laravel 中使用 vue.js 从谷歌位置自动完成获取纬度和经度

使用 laravel 和 vue js 从 mysql 数据库中检查带有逗号分隔值的复选框

如何将 vue.js 值作为参数传递给刀片中的路由