Как ввести данные с сервера в приложение Vue CLI? - PullRequest
Новая
       50

Как ввести данные с сервера в приложение Vue CLI?

0 голосов
/ 01 ноября 2019

У меня есть приложение Vue CLI, которое я хочу подключить к серверной части.
Сервер вернет шаблон представления с полезной нагрузкой данных, и я хочу вставить эту полезную нагрузку в виде JSON в приложение Vue каксвойство данных.

Файл index.html, сгенерированный Vue CLI, выглядит следующим образом (я устанавливаю filenameHashing в false в vue.config.js, чтобы избежать случайных имен файлов): 

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=UTF-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport content="width=device-width,initial-scale=1">
        <link href=/css/app.css rel=preload as=style>
        <link href=/css/chunk-vendors.css rel=preload as=style>
        <link href=/js/app.js rel=preload as=script>
        <link href=/js/chunk-vendors.js rel=preload as=script>
        <link href=/css/chunk-vendors.css rel=stylesheet>
        <link href=/css/app.css rel=stylesheet>
    </head>
    <body>
        <div id=app>
        </div>
        <script src=/js/chunk-vendors.js></script>
        <script src=/js/app.js></script>
    </body>
</html>

И main.js выглядит следующим образом: 

import Vue from 'vue';
import SiteContainer from './components/layout/SiteContainer.vue';

new Vue({
    render: h => h(SiteContainer)
}).$mount('#app');

Я хочу иметь возможность сделать что-то вроде следующего: 

<div id="app" :data="{{ json-string-of-data-payload-from-server }}">

, чтобы я мог получить доступ к даннымв SiteContainer следующим образом: 

props: [
    'data'
]

Я пытался по существу делать то, что написал выше, но, поскольку метод render, кажется, полностью заменяет #app div на компонент site-container,свойство :data также теряется.

Я также видел, что вы можете передать второй аргумент render с данными, но я не мог понять, как заставить его работать, и в конечном итоге этов main.js, а не в файле шаблона представления, который будет использовать сервер, где мне нужноданные JSON, предназначенные для передачи их с сервера в приложение Vue.

Как передать данные из созданного сервером шаблона представления в приложение Vue CLI, чтобы все заработало? Спасибо.

1 Ответ

1 голос
/ 02 ноября 2019

Мне удалось выяснить это.

Определив компонент SiteContainer как компонент Vue.js в main.js, я могу свободно использовать компонент в файле HTML для получениячто я хочу.

В частности, я изменил файл main.js следующим образом: 

import Vue from 'vue';
import SiteContainer from './components/SiteContainer.vue';

Vue.component('SiteContainer', SiteContainer); // This is the key.

new Vue({
    el: '#app'
});

А затем часть body файла HTML становится следующей (т. е. заменяет#app div, который у меня был в моем вопросе выше): 

<SiteContainer id="app" :data="{{ json-string-of-data-payload-from-server }}">
</SiteContainer>
...