Vue js v-for not working when array passed through props

Question

I don't get it for some reason when i pass array through props v-for wont work and only difference i can see from directly writing data is that one passed from props don't have spaces in between.

I am using laravel and through blade im passing data to vue, data is array of all photos with informations. But that data won't list through all photos and display div's.

Let me show you my code:

This is what i have in blade template:

<picture-upload
    :input_value="'{{ json_encode($profilephotos) }}'"
    :bind_user="'{{ $profile->id }}'"
    :input_name="'profilephoto'"
    :post_url="'{{ route('photouploads') }}'"
    :type="'profilephoto'"
></picture-upload>

I don't think that json_encode make difference in this case but i tried it any way.

And this is what i have in my photos.vue file

props: ['input_name', 'post_url', 'bind_user', 'type', 'input_value'],
    data() {
        return {
            files: [],
            uploads: this.input_value,
            items: [
              {"id":110,"user_id":28,"type":"profilephoto","name":"5.jpg","mime":"image/jpeg","extension":"jpg","path":"3f49191095d302fb7e66ce037dd5efa111287e8230964ad8a3170687ca4336a1","size":192445,"created_at":"2019-04-23 16:04:01","updated_at":"2019-04-23 16:04:01"},
              {"id":111,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b","size":193223,"created_at":"2019-04-23 21:58:52","updated_at":"2019-04-23 21:58:52"},
              {"id":112,"user_id":28,"type":"profilephoto","name":"5.jpg","mime":"image/jpeg","extension":"jpg","path":"0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b","size":192445,"created_at":"2019-04-23 21:58:52","updated_at":"2019-04-23 21:58:52"},
              {"id":113,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"ffe6f95d10c5249390fcea140fe15a1fb57f5d29626a947e4a999db50f3ea295","size":193223,"created_at":"2019-04-23 22:00:10","updated_at":"2019-04-23 22:00:10"},
              {"id":114,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"75a00a901f1a01a0267d44bebc8574efa9eb7a7edfd395e29dabb289efb353ac","size":193223,"created_at":"2019-04-23 22:05:32","updated_at":"2019-04-23 22:05:32"}
            ]
        }
    },

So input_value is what is passed from blade template, and items is what i added manually for testing, items is exactly the same as what i see when i output data in frontend.

Here is what i have in .vue <template> section

{{ items }}

<li v-for="item in items">
   {{ item.type }}
</li>

{{ uploads }}

<div v-for="upload in uploads">
  {{ upload.type }}
</div>

So items should output complete array and v-for should filter and output foreach item in that array, which should go the same for uploads but problem is uploads not working.

This is what i actually get in frontent

For {{ items }}

[ { "id": 110, "user_id": 28, "type": "profilephoto", "name": "5.jpg", "mime": "image/jpeg", "extension": "jpg", "path": "3f49191095d302fb7e66ce037dd5efa111287e8230964ad8a3170687ca4336a1", "size": 192445, "created_at": "2019-04-23 16:04:01", "updated_at": "2019-04-23 16:04:01" }, { "id": 111, "user_id": 28, "type": "profilephoto", "name": "4.jpg", "mime": "image/jpeg", "extension": "jpg", "path": "0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b", "size": 193223, "created_at": "2019-04-23 21:58:52", "updated_at": "2019-04-23 21:58:52" }, { "id": 112, "user_id": 28, "type": "profilephoto", "name": "5.jpg", "mime": "image/jpeg", "extension": "jpg", "path": "0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b", "size": 192445, "created_at": "2019-04-23 21:58:52", "updated_at": "2019-04-23 21:58:52" }, { "id": 113, "user_id": 28, "type": "profilephoto", "name": "4.jpg", "mime": "image/jpeg", "extension": "jpg", "path": "ffe6f95d10c5249390fcea140fe15a1fb57f5d29626a947e4a999db50f3ea295", "size": 193223, "created_at": "2019-04-23 22:00:10", "updated_at": "2019-04-23 22:00:10" }, { "id": 114, "user_id": 28, "type": "profilephoto", "name": "4.jpg", "mime": "image/jpeg", "extension": "jpg", "path": "75a00a901f1a01a0267d44bebc8574efa9eb7a7edfd395e29dabb289efb353ac", "size": 193223, "created_at": "2019-04-23 22:05:32", "updated_at": "2019-04-23 22:05:32" } ]

And there v-for="item in items" logic works, if i do

<li v-for="item in items">
   {{ item.type }}
</li>

I will get list of item.type

The problem happens if i do exactly the same with uploads something is not working.

If i test output of {{ uploads }} i will get exactly same array as with items except there are spaces between things in array.

This is output of {{ uploads }}

[{"id":110,"user_id":28,"type":"profilephoto","name":"5.jpg","mime":"image/jpeg","extension":"jpg","path":"3f49191095d302fb7e66ce037dd5efa111287e8230964ad8a3170687ca4336a1","size":192445,"created_at":"2019-04-23 16:04:01","updated_at":"2019-04-23 16:04:01"},{"id":111,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b","size":193223,"created_at":"2019-04-23 21:58:52","updated_at":"2019-04-23 21:58:52"},{"id":112,"user_id":28,"type":"profilephoto","name":"5.jpg","mime":"image/jpeg","extension":"jpg","path":"0bd693c2cd1ab5ec2c7223fc6a92356ab68c52e8cc0b7d5d5aa5b4a230cf015b","size":192445,"created_at":"2019-04-23 21:58:52","updated_at":"2019-04-23 21:58:52"},{"id":113,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"ffe6f95d10c5249390fcea140fe15a1fb57f5d29626a947e4a999db50f3ea295","size":193223,"created_at":"2019-04-23 22:00:10","updated_at":"2019-04-23 22:00:10"},{"id":114,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"75a00a901f1a01a0267d44bebc8574efa9eb7a7edfd395e29dabb289efb353ac","size":193223,"created_at":"2019-04-23 22:05:32","updated_at":"2019-04-23 22:05:32"},{"id":115,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"c0db13b85c255a30b8466ca5778cad05d06f20f2cf12a3db46e9b6a7d182fdd8","size":193223,"created_at":"2019-04-23 22:14:37","updated_at":"2019-04-23 22:14:37"},{"id":116,"user_id":28,"type":"profilephoto","name":"4.jpg","mime":"image/jpeg","extension":"jpg","path":"3591cedc64c8f3638d71643291ce2e37d697dbcdfe08c715254d94237b93b1a1","size":193223,"created_at":"2019-04-23 22:21:37","updated_at":"2019-04-23 22:21:37"}]

And if i try to do

<div v-for="upload in uploads">
  {{ upload.type }}
</div>

I get whole bunch of empty div's with not upload.type output. Plus i have like 20 images in total, i get like 200 empty div's.

This confuses me alot as why it is happening like this, any suggestions?

Flame · Accepted Answer · 2019-04-25 20:46:22Z

1

You are JSON encoding the variable thus you are passing a string. This is in essence correct, but you also might want to change

:input_value="'{{ json_encode($profilephotos) }}'"

to

:input_value="{{ json_encode($profilephotos) }}"

answered Apr 25, 2019 at 20:46

Flame

7,7563 gold badges43 silver badges64 bronze badges

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

2 Comments

lonerunner Over a year ago

That's it, omg something so simple it took me 2 hours i couldn't figure out. It works, but why is difference if i use ' or not ?

Flame Over a year ago

json_encode returns a string (in PHP terms) but it is directly parsable as javascript. In javascript it either represents array/number/string/object, so you could do let myvar = {{ json_encode($profilephotos) }} (echoing the blade directive into a javascript snippet). This results in myvar being an array/number/string/object, while if you put quotes around it it becomes a string.

Collectives™ on Stack Overflow

Vue js v-for not working when array passed through props

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related