Передать массив в Vue JS

Question

Я пытаюсь передать php object в Vue JS component и использовать его ключи для доступа к его значениям в компоненте.

Синтаксис, который я использую для синтаксического анализа php object внутри vue component должно быть неправильным, потому что в настоящий момент значения объекта в vue html отображаются как undefined undefined.

Мне было интересно, есть ли у кого-нибудь полезные предложения?

PHP пилка

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

vue компонент

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

Выход

введите описание изображения здесь

Answer 1

Вы определили свойство client как String вместо объекта. Попробуйте:

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

и свяжите опору client, используя v-bind, чтобы она не интерпретировалась как строка

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