Pass array into Vue JS

Question

I am trying to pass a php object into a Vue JS component and use its keys in order to access its values within the component.

The syntax that I am using to parse the php object within the vue component must be incorrect because at the moment the object values within the vue html are showing up as undefined undefined.

I wondered if anyone had any useful suggestions?

PHP blade file

    @foreach($clients as $client)
    
        <client client='{!! json_encode($client) !!}' home-route="{{ route('clients.show', $client->id) }}"></client>
    @endforeach

vue component

    <template>
        <li :data-clientID="client.id"><a :href="this.homeRoute">{{ client.first_name + ' ' + client.last_name }}</a>
            <span class="delete_x" data-toggle="modal" data-target="#delete_modal" :data-model="client.id">x</span>        
        </li>
    </template>
    
    <script>
        export default {
            name: 'client',
            props: {
                client: {
                    type: String,
                    required: true
                },
                homeRoute: {
                    type: String,
                    required: true
                }
            }
        }
    </script>

Output

Answer 1

You defined the client prop as String instead of object. Try:

export default {
    name: 'client',
    props: {
        client: {
            type: Object,
            required: true
        },
        homeRoute: {
            type: String,
            required: true
        }
    }
}

and bind the client prop using v-bind so it's not interpreted as a string

<client
  :client='{!! json_encode($client) !!}' 
  home-route="{{ route('clients.show', $client->id) }}"
></client>