Laravel and Inertia.js - Setting checkbox to checked

Question

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. Any assistance would be appreciated.

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

Client/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

You're using the same :key for both v-for , which probably is causing issues on rendering. You also don't need to duplicate your input element just to set the checked property. You can use the v-model for that.

  <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

To fix this issue I had to add an array of concern ids as part of the response. I accepted it as a prop in Edit.vue and filled that into the form field for concerns.Please see the updated code below.

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

Client/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