javascript - VueJS 数据()不工作

Question

我正在尝试制作一个 VueJS 应用程序，但即使是最简单的示例我也失败了。 我正在使用 Laravel 5.3，它预构建了对 VueJS 的支持(版本 1，我也尝试了版本 2)。

这是我的 Example.vue 组件

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                name: 'John Doe'
            }
        }
    }
</script>

这是主要代码

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

这是每次在控制台中显示的错误:

[Vue 警告]:属性或方法“名称”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明响应式数据属性。 (在组件中找到)

任何想法出了什么问题？ 谢谢

Answer 1

在您的 script 标签中而不是 export default 使用:

module.exports = {
  data() {
    return { counter: 1 }
  }
}

这应该适合你