Как передать в компонент Vue JS данные из PHP?

Question

[Евгений Петров]

У меня есть .vue файлы (Компоненты), в них я писал шаблон и встал на том месте, где нужно было вставить данные из скрипта PHP. Перерыл инет, прочел доки, но так и не нашел ничего подходящего. Как это делается на Vue JS? Заранее спасибо

Comments

[Евгений Петров]

есть извращенная мысль подтянуть Jquery Ajax'ом, но думаю это не совсем то, предполагаю должно быть свое Vue JS-овское решение

Answer 1

[D3lphi]

Да все достаточно просто:

<template>
    <div>
        <!-- Вызываем вычисляемое свойство -->
        {{ decodedData }}
    <div>
</template>

<script>
export default {
    // Входной параметр, через который компонент будет принимать данные в JSON представление.
    props: ['dataFromPhp '],
    computed: {
        // Вычисляемое свойство, которое будет преобразовывать данные из JSON в объект js.
        decodedData() {
            return JSON.parse(this.dataFromPhp );
        }
    }
}
</script>

Код, в котором используется этот компонент:

<example-component data-from-php="<?= json_encode($data) ?>"></example-component>

Comments

[ajaxtelamonid]

Всё так, в vue из php можно передавать инит-данные через пропсы.
Но есть пара уточняющих ньюансов
Во-первых, чтобы данные пришли в виде объекта, а не строки надо делать :data-from-php='<?= json_encode($data) ?>'
Во-вторых, чтобы в php-шаблонах можно было вот так вот юзать компоненты vue, ваш лейаут должен быть обёрнут дивом, на котором должен быть навешан инстанс vue. Например, как сделано в Laravel: https://github.com/laravel/laravel/blob/master/res...
Если вы вручную маунтите компоненты-виджеты на определённые дивы, вам нужно действовать по методу 2 из ответа Евгений Вольф

Answer 2

[Евгений Вольф]

Как это делается на Vue JS? Заранее спасибо

Не могу обозначить своё мнение, как хоть сколь нибудь экспертное, но в целом, в JS'е (любом, клиентском, связка с серверной частью) обычно это делается одним из двух вариантов:
1. Отправляете запрос на сервер (AJAX например) - получаете данные
2. Рендерите данные прямо в странице, в <script>'e, например, что-то вроде: var a = 100; //Генерируется в PHP

Я обычно использую и тот и другой, от случая к случаю. Второй вариант, не так красив как первый, за то на 99.999% исключены "задержки", прогрузки дополнительные, -1 запрос к серверу и т.д.

P.S. Есть ещё разные "крайние" варианты, вроде записи/чтения кук, работа через веб-сокеты и масса других, я привёл самые простые и наиболее распространенные.