А как вы делаете динамические объекты (Vue)?

Question

[Morfeey]

Пытаюсь реализовать паттерн mvc в связке с аяксом и vue.js (далее "вью").
Никак не получается реализовать динамическое создание объекта вью, что бы по нормальному верстать страницы, кроме "быдло" способа: "выплевыванием" самого этого объекта на страницу сервером. Сам вью начал изучать всего пару дней назад, может не знаю чего? Есть кто уже на опыте ? Подскажите куда копать ? Желательно без node.js.

Comments

[lavezzi1]

Кинь пример того что хочешь именно сделать.

[Morfeey]

Н@lavezzi1, Ну например:
Переходим на страницу "новости", страница на которой должно быть несколько идентичных блоков (естественно определяется выборкой из базы). Кидаем запрос на сервер, который возвращает массив данных и саму верстку (json). Распихиваем данные в нужные места. Верстку на страницу, а массив в объект вью.
Пробовал создавать глобальную переменную.. да наверное проще сказать чего не пробал.

PageVM = new Vue({
        el: ".news",
        data:{items:ListData}
 });

Вот верстка:

<div class='container'>
    <div class='row news justify-content-center align-items-center'>
        <a v-for='item in items' class='news-main-block col-3' v-bind="{ href:item.href}" style='background-image: url(assets/img/news.jpg);'>
            <h3 class='news-name text-center'>{{item.name}}</h3>

            <span class='news-text-block'>{{item.text}}</span>
            <span class='news-date text-right'>{{item.data}}</span>
        </a>
    </div>
</div>

А вот пример данных, которые приходят с сервера:

spoiler

'0' :
        'name' => "Сайт запущен"
        'text' => "Сайт успешно запущен. Небольшие косяки и ЛК будут готовы в скором времени."
        'href' => "#news"
        'date' => "07.12.2016"
    '1' :
        'name' => "Лаунчер и его проблемы"
        'text' => "Возможность скачать и обновлять клиент (на данный момент). Полное описание на форуме. "
        'href' => "http://forum.ao-alt.ru/index.php?threads/Лаунчер-и-его-косяки.3/"
        'date' => "09.12.2016"
    '2' :
        'name' => "С Новым Годом !)"
        'text' => "Администрация проекта от всей души поздравляет игроков с  новым 2017 годом !"
        'href' => "#"
        'date' => "01.01.2017"
    '3' :
        'name' => "Фикс 0.8"
        'text' => "Полное описание на форуме."
        'href' => "http://forum.ao-alt.ru/index.php?threads/Хотфикс-0-8.13/"
        'date' => "13.02.2017"
    '4' :
        'name' => "test"
        'text' => "test"
        'href' => "#test"
        'date' => "test"

А результат вот:

[Anton Filippov]

У Вью превосходные доки, прочитайте их за пару часов, прежде чем такую ересь делать)

[numfin]

Какую-то дичь несешь автор. Посмотри что такое ssr, может это тебе надо. Только хз зачем тебе vue для этого

[numfin]

P.s. сразу видно - типичный пхпшник, который делает всем сердцем в админке запилить кастомные страницы. Олсо то что ты хочешь также можно реализовать через v-html. Но вот задай вопрос - оно тебе действительно надо?

Answer 1

[ajaxtelamonid]

"Верстку" нельзя получить с сервера, она должна быть уже в vue-компоненте. С сервера вы можете получить только данные. Пляшите от этого. И да, лучше перечитать доку от начала и до конца ещё раз.

Comments

[Moe Green]

никогда не обладал способностью к телепатии. но прочитал Ваш ответи понял суть вопроса ))

Абсолютно с Вами согласн и присоединяюсь к ответу

ну конечно же - Vue.js не React.js, у Vue.js имеется "жесткий" шаблон, к которому выполняется привязка данных и бизнес-логики.

Answer 2

[Евгений Великий]

Возможно стоит использовать Vue Resource и загружать данные прямо из Vue приложения?