Данные не отображаются в Vue Js

Question

Я пытался отобразить данные на домашней странице, но ничего не отображается, несмотря на отсутствие ошибок. Вот мой код

приложение. js

import Home from './components/Home';
const routes = [{ name: 'home',path: '/home',component: Home},];
const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router },{data: {message:'Hello Vue!'}}, Home)).$mount('#app');

Home. vue

<p>{{ message }}</p>

Answer 1

Вам необходимо получить доступ к родительским данным, поскольку ваш домашний компонент является дочерним компонентом.

Home vue

<div id="app">
<p>{{ this.$parent.message }}</p>
</div>

Answer 2

Чтобы отобразить предоставленный вами HTML -контент, вы должны указать начальную точку для vue. Это делается так:

Ваш код

import Home from './components/Home';
const routes = [{ name: 'home',path: '/home',component: Home},];
const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router },{data: {message:'Hello Vue!'}}, Home)).$mount('#app');

внутри блейд-файла

<div id="app">
<p>{{ message }}</p>
</div>