Laravel 和 Inertia.js - 将复选框设置为选中

Question

我正在开展一个项目，在该项目中我传递了一份关注点列表和一份客户关注点列表。我正在尝试在编辑视图中检查与客户关注点匹配的所有关注点。这里的想法是，我可以列出所有可能的问题，并预先检查客户的问题。但是我似乎无法让它工作。下面的代码是我正在使用的，但这只是创建了关注列表的 4 个副本。任何帮助将不胜感激。

ClientController.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,
            ]
        );
    }

客户端/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>

Answer 1

您对两个v-for 使用相同的:key，这可能会导致渲染问题。您也不需要复制 input 元素来设置 checked 属性。您可以使用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>

Answer 2

为了解决这个问题，我必须添加一系列关注 id 作为响应的一部分。我在 Edit.vue 中接受了它作为道具并将其填写到表单字段中以供关注。请参阅下面的更新代码。

ClientController.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,
            ]
        );
    }

客户端/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,
            },
        }
    },
...

请注意，我已将 $clientConcerns 添加为响应的一部分，然后将其用作表单中 concerns 的值