gpt4 book ai didi

javascript - 当数组通过 props 时,Vue js v-for 不起作用

转载 作者:行者123 更新时间:2023-12-02 23:46:09 25 4
gpt4 key购买 nike

当我通过 props 传递数组时,由于某种原因我没有得到它 v-for不起作用,我从直接写入数据中看到的唯一区别是从 props 传递的数据之间没有空格。

我正在使用 Laravel 并通过 Blade 将数据传递给 Vue,数据是所有带有信息的照片的数组。但该数据不会列出所有照片并显示 div。

让我向您展示我的代码:

这是我在 Blade 模板中的内容:

<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是从 Blade 模板传递的内容,并且 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。

这让我很困惑,为什么会这样,有什么建议吗?

最佳答案

您正在对变量进行 JSON 编码,因此您正在传递一个字符串。这本质上是正确的,但您可能也想改变

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

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

关于javascript - 当数组通过 props 时,Vue js v-for 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55857288/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com