如何将数组传递给 Vue.js 中的 IFrame 元素？

Question

我需要将一个数组传递给 vue 中的 iframe 窗口。在此之前，我设法根据 stackoverflow 中的答案将数据传递给 iFrame，但该解决方案不适用于 Array。以下是我的尝试：

Vue 上次尝试：

<iframe :src="getMultipleMarkers"></iframe>

    getMultipleMarkers(){
        var markers = [this.reports];
        console.log(markers )
        return `http://127.0.0.1:8000/multipleMarakers.html?reports=${markers}`;
    },

我可以像这样markers[0][x]['created_at'] 传递数组的 1 个索引的值。但我需要整个数组

Vue 首次尝试：

    getMultipleMarkers(){
        return `http://127.0.0.1:8000/multipleMarakers.html?reports=${this.reports}`;
    },

我通过上述代码中的这种方法传递了我的所有数据，但它们不是数组。传递的数据就像${this.customData} => which customData had a string text。

以下是我在 iFrame 中从 vue 获取数据的方式：

var params = location.href.split('?')[1].split('&');
data = {};
for (x in params)
{
    data[params[x].split('=')[0]] = params[x].split('=')[1];
}
console.log(data['reports']);

以上代码在控制台中的结果是这样的：

[object%20Object],[object%20Object],[object%20Object],[object%20Object]

[object%20Object] 根据数组长度重复。如何将我的 reports 传递给 iFrame 元素？

编辑 01：Mathew Berg 解决方案的结果

Uncaught SyntaxError: Unexpected token % in JSON at position 3

标记的控制台日志：

我在 html 文件中删除了 Stringify，这是结果：

看起来这些带有 %22 的字符无缘无故地添加到结果中。

Answer 1

您必须事先对其进行 JSON.stringify：

 getMultipleMarkers() {
    var markers = [this.reports];
    console.log(markers)
    return `http://127.0.0.1:8000/multipleMarakers.html?reports=${JSON.stringify(markers)}`;
 },

然后在拿到的时候再解析：

console.log(JSON.parse(data['reports']));