Question

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

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

<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

您需要在javascript周围为Page1和Page2组件添加<script>个标签。

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

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

1 个答案: