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
菜单或表格,在表格本身中它有一个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>
我希望你能理解我的问题。感谢您的帮助。
【问题讨论】:
【参考方案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根据数据库值自动选择复选框的主要内容,如果未能解决你的问题,请参考以下文章
根据Laravel Vue Js Api中的关系从多个表中删除数据
在 Laravel 中使用 vue.js 从谷歌位置自动完成获取纬度和经度