Как передать массив в IFrame Element в Vue.js?

Question

мне нужно передать массив в окно iframe в vue. До этого мне удавалось передавать данные в базу iFrame по ответу в stackoverflow, но решение для Array работать не будет. Вот как я пытался:

Vue Last Try:

<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 First Trye:

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

Я передал все свои данные, как этот метод из кода выше, но они не были массивом. переданные данные были похожи на ${this.customData} => which customData had a string text.

А вот как я получил данные от vue в iFrame:

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

Консоль Журнал маркеров:

Я удалил Stringify в HTML-файл, и это было результаты:

Взглядыкак эти символы с% 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']));