如何將數組傳遞給 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}`;
    },

我可以傳遞 1 個數組索引的值，就像這樣markers[0][x]['created_at'] 。 但我需要整個陣列

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：馬修伯格解決方案的結果

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']));