Question

当我将数组通过道具v传递给我时，由于某种原因我没有得到它，因为它无法工作，而我直接看到的数据唯一的区别是，从道具传递的数组之间没有空格。

我正在使用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 }}的输出，除了数组中的内容之间有空格，我将获得与项目完全相同的数组。

这是{{ 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。

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

Answer 1

使用»Quotation Singletick«“，您将进入»string«模式-这不是变量，而是您输入的字符/ Laravel支持。

从最佳实践的角度来看：不要在属性/变量/属性名称中使用下划线。 Vue在组件内部为您将“：input-value”（kebab-case）转换为“ inputValue”（camelCase）。

最后但并非最不重要。确保始终为您的v-for列表提供密钥。喜欢

<li v-for="(item,index) in items" :key="index"></li>

希望有帮助

从Laravel后端传递数组时，Vue JS V-for不起作用

1 个答案: