Javascript Vue js v-用于阵列通过道具时不工作

由于某种原因，当我通过道具

v-for

传递数组时，我并没有得到它，我从直接写入数据中看到的唯一区别是，从道具传递的数组之间并没有空格

我使用的是laravel，通过blade im将数据传递给vue，数据是包含信息的所有照片的数组。但是，这些数据不会在所有照片和显示部门中列出

让我向您展示我的代码：

这是刀片模板中的内容：

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

因此，

input_value

是从刀片模板传递的，而

items

是我为测试手动添加的，

items

与我在前端输出数据时看到的完全相同

以下是我在

.vue

部分中看到的内容

{{ items }}

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

{{ uploads }}

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

如果我这样做的话，

v-for=“items in items”

逻辑是有效的

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

如果我试着去做

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

{{upload.type}

我得到了一大堆没有上传的空div。输入输出。加上我总共有20张图片，我得到了大约200张空的div

---

这让我很困惑，为什么会这样，有什么建议吗？

您正在对变量进行JSON编码，因此您正在传递一个

字符串。这在本质上是正确的，但你也可能想要改变

：input_value=“{{json_encode（$profilephotos）}”

到

：input_value=“{{json_encode（$profilephotos）}}”
就是这样，天哪，这么简单的事情花了我两个小时我都搞不懂。它可以工作，但如果我使用或不使用
，
为什么会有区别呢？
json_encode
返回一个
字符串（用PHP术语），但它可以直接作为javascript解析。在javascript中，它表示array/number/string/object，因此您可以执行
让myvar={{json_encode（$profilephotos）}
（将blade指令回送到javascript片段中）。这将导致
myvar
成为一个数组/数字/字符串/对象，而如果在其周围加上引号，它将变成一个字符串。
<li v-for="item in items">
   {{ item.type }}
</li>

[{"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>