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

У меня есть .vue файлы (Компоненты), в них я писал шаблон и встал на том месте, где нужно было вставить данные из скрипта PHP. Перерыл инет, прочел доки, но так и не нашел ничего подходящего. Как это делается на Vue JS? Заранее спасибо
  • Вопрос задан
  • 5601 просмотр
Пригласить эксперта
Ответы на вопрос 2
@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>
Ответ написан
Wolfnsex
@Wolfnsex Куратор тега PHP
Если не хочешь быть первым - не вставай в очередь!
Как это делается на Vue JS? Заранее спасибо
Не могу обозначить своё мнение, как хоть сколь нибудь экспертное, но в целом, в JS'е (любом, клиентском, связка с серверной частью) обычно это делается одним из двух вариантов:
1. Отправляете запрос на сервер (AJAX например) - получаете данные
2. Рендерите данные прямо в странице, в <script>'e, например, что-то вроде: var a = 100; //Генерируется в PHP

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы