Как правильно передать JSON в компонент vue js?

Question

[Андрей]

Из шаблона сайта в компонент передаю данные для инициализации в json:

<div id="root">
            <my-component  docs='{{ json }}' />
        </div>

В компонент, в свойство this.docs попадает строка, ее надо распарсить чтобы получить объект.
Но так не работает:

const my-component = {
        props: ['docs'],
        data: function() {
            return {
                docs: JSON.parse(this.docs)
            };
        },
    };

Нельзя изменять входящие свойства.

Я конечно могу создать новое свойство, типа docs2 и просто сохранить json в свойстве docs на память, но мне эта идея не нравиться :)

Где правильнее будет распарсить строку?

Answer 1

[0xD34F]

Смените привязку параметра со статической на динамическую:

<my-component :docs='{{ json }}' />

Всё, не надо никакого JSON.parse, docs сразу будет объектом.

Answer 2

[Roman K]

computed сделай

И вообще, в props и data не должно быть атрибутов с одним именем

Comments

[Андрей]

В общем да, это более менее вариант. А более красивого варианта передать статичные данные для инициализации компонента нет? Ведь по сути я создал наблюдаемое свойство, которое будет наблюдать за статическим JSONом. Не очень полезное занятие.