[英]Laravel and Inertia.js - Setting checkbox to checked
I am working on a project in which I pass a list of concerns and a list of client concerns.我正在从事一个项目,在该项目中我传递了一份关注事项列表和一份客户关注事项列表。 I am trying to check all concerns that have matching client concerns in the edit view.
我正在尝试检查在编辑视图中具有匹配的客户关注点的所有关注点。 The idea here is that I can have a list of all possible concerns and have the client's concerns pre-checked.
这里的想法是,我可以列出所有可能的问题,并预先检查客户的问题。 However I can't seem to get it working.
但是我似乎无法让它工作。 The below code is what I am using, but this just creates 4 copies of the concerns list.
下面的代码是我正在使用的,但这只会创建 4 个关注列表的副本。 Any assistance would be appreciated.
任何援助将不胜感激。
ClientController.php客户端控制器.php
/**
* Show the form for editing the specified resource.
*
* @param \App\Models\Client $client
* @return \Illuminate\Http\Response
*/
public function edit(Client $client)
{
//
$concerns = Concern::all();
return Inertia::render('Client/Edit',
[
'client' => $client::with('concerns')->get()->first(),
'concerns' => $concerns,
]
);
}
Client/Edit.Vue客户端/Edit.Vue
<ul id="concerns">
<li v-for="(concern,id) in concerns" v-bind:key="id">
<span v-for="(cc, id) in client.concerns" v-bind:key="id">
<span v-if="concern.id === cc.id">
<input type="checkbox" :name="concern.concern_slug" :value="concern.id" v-model="form.concerns" checked />
<label :for="concern.concern">{{ concern.concern }}</label>
</span>
<span v-if="concern.id !== cc.id">
<input type="checkbox" :name="concern.concern_slug" :value="concern.id" v-model="form.concerns" />
<label :for="concern.concern">{{ concern.concern }}</label>
</span>
</span>
</li>
</ul>
...
<script>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue'
import BreezeCheckbox from '@/Components/Checkbox.vue'
import { Head } from '@inertiajs/inertia-vue3';
import VueGoogleAutocomplete from 'vue-google-autocomplete'
export default {
props: {
errors: Object,
concerns: Object,
client: Object,
clientConcerns: Object,
},
data () {
return {
form: {
first_name: this.client.first_name,
last_name: this.client.last_name,
email: this.client.email,
address: this.client.address,
city: this.client.city,
postal_code: this.client.postal_code,
province: this.client.province,
preferred_day: this.client.preferred_day,
preferred_time: this.client.preferred_time,
preferred_frequency: this.client.preferred_frequency,
goals: this.client.goals,
concerns: [],
},
}
},
...
</script>
You're using the same :key
for both v-for
, which probably is causing issues on rendering.您对两个
v-for
使用相同的:key
,这可能会导致渲染问题。 You also don't need to duplicate your input
element just to set the checked
property.您也不需要为了设置
checked
属性而复制input
元素。 You can use the v-model
for that.您可以为此使用
v-model
。
<ul id="concerns">
<li
v-for="(concern,id) in concerns"
v-bind:key="id"
>
<span
v-for="(cc, ccId) in client.concerns"
v-bind:key="ccId"
>
<input
type="checkbox"
:name="concern.concern_slug"
:value="concern.id"
v-model="concerns" <!-- Not sure if this can be an array of objects -->
/>
<label :for="concern.concern">{{ concern.concern }}</label>
</span>
</li>
</ul>
To fix this issue I had to add an array of concern ids as part of the response.要解决此问题,我必须添加一组关注 ID 作为响应的一部分。 I accepted it as a prop in Edit.vue and filled that into the form field for concerns.Please see the updated code below.
我接受它作为 Edit.vue 中的一个道具,并将其填写到表单字段中以备不时之需。请参阅下面的更新代码。
ClientController.php客户端控制器.php
/**
* Show the form for editing the specified resource.
*
* @param \App\Models\Client $client
* @return \Illuminate\Http\Response
*/
public function edit(Client $client)
{
//
$concerns = Concern::all();
$client_with_concerns = $client::with('concerns')->get()->first();
$clientConcerns = collect();
foreach($client_with_concerns->concerns as $concern) {
$clientConcerns->push($concern['id']);
}
return Inertia::render('Client/Edit',
[
'client' => $client::with('concerns')->get()->first(),
'concerns' => $concerns,
'clientConcerns' => $clientConcerns,
]
);
}
Client/Edit.vue客户端/Edit.vue
...
data () {
return {
form: {
first_name: this.client.first_name,
last_name: this.client.last_name,
email: this.client.email,
address: this.client.address,
city: this.client.city,
postal_code: this.client.postal_code,
province: this.client.province,
preferred_day: this.client.preferred_day,
preferred_time: this.client.preferred_time,
preferred_frequency: this.client.preferred_frequency,
goals: this.client.goals,
concerns: this.clientConcerns,
},
}
},
...
Notice that I have added the $clientConcerns
as part of the response, and then used that as value for concerns
in form请注意,我已将
$clientConcerns
添加为响应的一部分,然后将其用作表单中concerns
的值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.