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

Please show us the HTML generated.

lbrandao
– lbrandao

2020-07-14 16:07:34 +00:00
Commented Jul 14, 2020 at 16:07 — lbrandao
– lbrandao, Commented Jul 14, 2020 at 16:07
You don't need this. in :href="this.homeRoute"

Phil
– Phil

2020-07-15 02:46:24 +00:00
Commented Jul 15, 2020 at 2:46 — Phil
– Phil, Commented Jul 15, 2020 at 2:46

Phil · Accepted Answer · 2020-07-15 02:48:14Z

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>

edited Jul 15, 2020 at 2:48

Phil

166k25 gold badges265 silver badges269 bronze badges

answered Jul 14, 2020 at 16:08

lbrandao

4,3844 gold badges37 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Robert Young Over a year ago

Yup. @fromvega, that's because I am using json_encode to encode it as a json string in my blade template. It isn't an object.

Phil Over a year ago

All this answer needs is to change the prop binding to :client (or v-bind:client) so the JSON encoded string is interpreted as an object

lbrandao Over a year ago

@RobertYoung it's a string in PHP but in JavaScript it should be interpreted as an object.

Robert Young Over a year ago

@fromvega thankyou. I have just tried this and it works. Thanks for your help.

Collectives™ on Stack Overflow

Pass array into Vue JS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related