Как правильно записывать данные во vue.js?

Question

[First Name]

Всем привет.
На бэкенде стоит Yii 2, фронт Vue.js
НА yii 2 передаю в рендр какие то данные

return $this->controller->render(
            'catalog/index',
            [
                'products' => Json::encode($this->query)
            ]
        )

В шаблоне их вставляю в скрытый div и уже с помощью jquery принимаю их из дива и записываю в свойства объекта Vue

<div class="hidden" id="products"><?= $products; ?></div>

this.products = JSON.parse($('#products').text());
Как правильно их передавать?
Знаю что это просто ужасно так делать, поэтому прошу совета.
Благодарю за ответы :)

Comments

[Алексей Скляров]

А почему бы вам просто не обращаться к серверу в самом vue и там же сразу присваивать this.products ваш json с продуктами?

[First Name]

Алексей Скляров, Вот в том то и дело, как это ОБРАТИТЬСЯ к серверу, буду благодарен, если ткнешь меня в доку :С
Так как не нашел сам.
Благодарю

[Сергей delphinpro]

Да нормальный способ, если данные нужны разово с загрузкой страницы. Только писать их стоит в переменную

<script>
  window['PRODUCTS'] = <?=$products?>;
</script>

created(){
  this.prodducts = window.PRODUCTS;
}

[Roman K]

Сергей delphinpro, засорять window ок ваще

[First Name]

Roman Kitaev, а как правильно будет?)

[Сергей delphinpro]

Roman Kitaev, вы когда слышите где-то какие-то рекомендации, всегда слепо им следуете?
Или всё-таки думаете по ситуации?

Одно дело, когда вы пишете библиотеку, которая неизвестно где будет использоваться, и совсем другое, когда вы проектируете полностью подконтрольный вам проект. Тем более если это упрощает дело.

Да, вы можете по фен-шую получать данные асинхронным запросом. Но нафига он здесь нужен?

[Roman K]

Сергей delphinpro, потому что сначала это будет один список, потом второй, потом проще аяксом вот здесь получать, потом еще как-то будет проще и привет лапше. Потом прикрутим jquery и будем менять DOM им (потому что там было так удобней), и vue, чтобы точно никто не смог поддерживать этого франкенштейна.

[Сергей delphinpro]

Roman Kitaev, речь идёт о данных, нужных на конкретной странице, и только единожды. Я не вижу смысла делать дополнительный запрос для этого. Решение приемлемое.
А ваши фантазии по поводу jquery и DOM к данной теме отношения не имеют.

Answer 1

[Максим Тимофеев]

Однозначно json. При чем я бы отправлял ajax и получал его. Но можно и сгенерить переменную.

Comments

[First Name]

Аджаксом как я понимаю, не пойдет, так как на Бэке в yii я сделал в экшене разделение.

if (Yii::$app->request->isAjax) {
            Yii::$app->response->format = 'json';
            return ['products' => $this->querty];
        }
        return $this->controller->render(
            'catalog/index',
            [
                'products' => Json::encode($this->query),
            ]
        );

Естественно это говнокод, может правильнее будет по-другому?)

[Максим Тимофеев]

First Name, может быть, не видя проекта и тз сложно сказать.