为什么我的 Vue 实例的属性和方法在模板中不可用？

Question

• 我设置了一个 Vue.js CLI 项目。
• 在页面上，我想在data() 中定义一个变量，然后在我的模板中使用它。
• 为什么下面的代码告诉我：

属性或方法“消息”未在实例上定义，但 在渲染期间引用。确保声明反应数据 数据选项中的属性。

<template>
    <div>
        <h1>Page 2</h1>
        <p> You can go back to
            <router-link to="/">home</router-link>.</p>
        <p>[{{message}}]</p>
    </div>
</template>

export default {
    name: "Page2",
    data() {
        return {
            message: "here it is"
        }
    }
}

---

还有这段代码：

            <button class="btn" @click="test()">the test</button>
        </p>
    </div>
</template>

export default {
    name: "Page2",
    data() {
        return {
            message: "here it is"
        }
    },
    methods: {
        test() {
            console.log('test');
        }
    }
}

类似地告诉我：

属性或方法“test”未在实例上定义，但 在渲染期间引用。确保声明反应数据 数据选项中的属性。

我还需要做什么才能使这些变量和方法在我的页面模板中可用？

这种代码结构在其他 Vue.js CLI 项目中也有效，因此它很可能是在项目环境中的某个地方没有设置正确的东西。

例如，这段代码在另一个项目中工作：

<template>
  <div class="start alert alert-success" role="alert">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'start',
  data() {
    return {
      msg: 'Please choose an option.'
    }
  }
}
</script>

它适用于Home 页面，但不适用于Page1 或Page2。我的index.js 页面如下所示：

import Vue from "vue";
import Router from "vue-router";
import Home from "@/components/Home";
import Page1 from "@/components/Page1";
import Page2 from "@/components/Page2";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home
    },
    {
      path: "/page1",
      name: "Page1",
      component: Page1
    },
    {
      path: "/page2",
      name: "Page2",
      component: Page2
    }
  ]
});

Answer 1

您需要在 Page1 和 Page2 组件的 javascript 周围添加 <script> 标记。

否则，vue-loader 似乎只是忽略了该脚本并且没有给您相关警告（只是模板中引用的数据丢失了）。