我正在做一个项目,在这个项目中我传递了一个关注点列表和一个客户关注点列表。我试图在编辑视图中检查所有与客户关注点匹配的关注点。这里的想法是我可以有一个所有可能关注点的列表,并预先检查客户的关注点。但是我似乎不能让它工作。下面的代码是我正在使用的。但这只是创建了4份关注列表的副本。如有任何帮助,将不胜感激。
客户端控制器.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,
]
);
}
客户端/编辑.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>
2条答案
按热度按时间pgky5nke1#
您对两个
v-for
使用了相同的:key
,这可能会导致渲染问题。您也不需要复制您的input
元素来设置checked
属性。您可以使用v-model
。jyztefdp2#
为了解决这个问题,我不得不添加一个关注ID数组作为响应的一部分。我接受了它作为Edit.vue中的一个属性,并将其填充到关注的表单字段中。请参见下面更新的代码。
注意,我已经将
$clientConcerns
添加为响应的一部分,然后将其用作表单中concerns
的值