Vue JS v-for在数组通过props时不起作用

Question

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

我正在使用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: [

        }

    },

那么input_value是什么是刀片式模板过去了，items是我手动添加测试，items是完全一样的我所看到的，当在前端I输出数据。

这是我在本.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应该过滤并输出该数组中的foreach项目，这样做应该相同，uploads但是问题uploads不起作用。

v-for="item in items"如果我这样做的话，逻辑就可以了

<li v-for="item in items">

   {{ item.type }}

</li>

我会得到的清单 item.type

如果我对uploads某些事情做的完全一样，那么问题就发生了。

如果我测试我的输出，{{ uploads }}我将得到与完全相同的数组，items除了数组中的事物之间有空格。

如果我尝试去做

<div v-for="upload in uploads">

  {{ upload.type }}

</div>

我得到了一堆空的div，没有upload.type输出。再加上我总共有20张图片，我得到200张空白的div。

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