当我通过道具v-for
传递数组时,由于某种原因,我无法理解它,并且我只能从直接写入数据中看到的区别是,从道具传递的字符串之间没有空格。 / p>
我正在使用laravel并通过刀片将数据传递到vue,数据是包含信息的所有照片的阵列。但是这些数据不会列出所有照片并显示div。
让我告诉我我的代码:
这是我在刀片模板中的内容:
<picture-upload
:input_value="'{{ json_encode($profilephotos) }}'"
:bind_user="'{{ $profile->id }}'"
:input_name="'profilephoto'"
:post_url="'{{ route('photouploads') }}'"
:type="'profilephoto'"
></picture-upload>
在这种情况下,我不认为json_encode
会有所作为,但是我尝试了任何方式。
这就是我在photos.vue
文件中所拥有的
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"}
]
}
},
因此input_value
是刀片服务器模板传递的内容,items
是我为测试手动添加的内容,items
与我在前端输出数据时看到的内容完全相同
这是我在.vue
<template>
部分中所拥有的
{{ items }}
<li v-for="item in items">
{{ item.type }}
</li>
{{ uploads }}
<div v-for="upload in uploads">
{{ upload.type }}
</div>
因此,items
应该输出完整的数组,而v-for
应该过滤并输出该数组中的每个项目,这对于uploads
应该是一样的,但是问题是uploads
不起作用
这就是我真正要面对的东西
对于{{ 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" } ]
如果我这样做,v-for="item in items"
逻辑就可以了
<li v-for="item in items">
{{ item.type }}
</li>
我会得到item.type
如果我对uploads
所做的操作完全相同,则会发生问题。
如果我测试{{ uploads }}
的输出,我将得到与items
完全相同的数组,除了数组中各元素之间存在空格。
这是{{ 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"}]
如果我想做
<div v-for="upload in uploads">
{{ upload.type }}
</div>
我得到了一堆空的div,没有upload.type
输出。再加上我总共有20张图片,我得到200张空白div。
这让我很困惑,为什么会这样,有什么建议吗?
答案 0 :(得分:1)
您正在对变量进行JSON编码,因此您正在传递string
。从本质上讲这是正确的,但您可能还需要更改
:input_value="'{{ json_encode($profilephotos) }}'"
到
:input_value="{{ json_encode($profilephotos) }}"