Vue Js中未呈现的数据

时间:2020-01-24 12:45:58

标签: laravel vue.js

我尝试将数据呈现到主页,但是尽管没有错误,却什么也没有显示。这是我的代码

app.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>

2 个答案:

答案 0 :(得分:0)

为了呈现您提供的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>

答案 1 :(得分:0)

由于Home组件是子组件,因此您必须访问父数据。

家庭主意

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