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警告]：财产或方法＆＃34;姓名＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。（在组件中找到）

任何想法都错了吗？感谢

Answer 1

在script代码而不是export default中使用：

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

这应该对你有用

Answer 2

调用模板中的组件

＆＃13;

Vue.component('example', {
  template: `<div class="profile">{{ name }}</div>`,
  data () {
return {
  name: 'John Doe'
}
  }
})

const app = new Vue({
  el: '#app'
})

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app"><example></example></div>

＆＃13;

Answer 3

问题是您正在尝试加载组件＆＃39;示例＆＃39;从该文件，但你没有给它一个名字。你应该使用：

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

或者按以下方式加载组件（不确定是否需要扩展名.vue）：

require('./exmaple').default();

如果您使用的是Babel，您还可以使用以下语法加载组件而不给它们命名：

import Example from ./example

同时结帐this post以获取更多信息，以防您使用Babel

VueJS数据（）无效

3 个答案: