为什么我的 Vue 实例的属性和方法在模板中不可用? [英] Why are my Vue instance's properties and methods not available in the template?
本文介绍了为什么我的 Vue 实例的属性和方法在模板中不可用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
- 我建立了一个 Vue.js CLI 项目.
- 在页面上，我想在
data()中定义一个变量，然后在我的模板中使用它. - 为什么下面的代码告诉我:
属性或方法消息"未在实例上定义，但渲染时引用.确保声明反应性数据数据选项中的属性.
<div><h1>第2页</h1><p>你可以回到<router-link to="/">home</router-link>.</p><p>[{{message}}]</p></模板>导出默认{名称:第2页"，数据() {返回 {消息:在这里"}}}
<小时>还有这段代码:
<button class="btn" @click="test()">测试</button></p></模板>导出默认{名称:第2页"，数据() {返回 {消息:在这里"}},方法: {测试() {console.log('test');}}}
类似地告诉我:
<块引用>属性或方法test"未在实例上定义，但渲染时引用.确保声明反应性数据数据选项中的属性.
我还需要做什么才能使这些变量和方法在页面上的模板中可用?
这种代码结构在其他 Vue.js CLI 项目中也有效，因此在项目环境中的某处设置不正确.
例如，此代码适用于另一个项目:
<div class="start alert alert-success" role="alert">{{消息}}</模板><脚本>导出默认{name: '开始',数据() {返回 {msg: '请选择一个选项.'}}}
它适用于 Home 页面，但不适用于 Page1 或 Page2.我的 index.js 页面如下所示:
从vue"导入Vue；从vue-router"导入路由器；从@/components/Home"导入主页；从@/components/Page1"导入Page1；从@/components/Page2"导入Page2；Vue.use(路由器);导出默认的新路由器({路线:[{小路: "/"，name: "家",组件:首页},{路径:/page1"，名称:第1页"，组件:第1页},{路径:/page2"，名称:第2页"，组件:第2页}]}); 解决方案
您需要在 Page1 和 Page2 组件的 javascript 周围添加
