VueJS数据（）不起作用

Posted 2023-02-16

【中文标题】VueJS数据（）不起作用

【英文标题】：VueJS data() not working

【发布时间】：2017-02-17 07:56:09

【问题描述】：

我正在尝试制作一个 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 警告]：属性或方法“名称”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。 （在组件中找到）

任何想法有什么问题吗？ 谢谢

【参考方案1】：

调用模板中的组件

Vue.component('example', 
  template: `<div class="profile"> name </div>`,
  data () 
return 
  name: 'John Doe'

  
)

const app = new Vue(
  el: '#app'
)

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app"><example></example></div>

【讨论】：

是的，它是这样工作的。但我真的很想使用“单文件组件”

这完全一样，不是吗？导入单个文件组件并将组件选项替换为您导入的组件名称

嗯，不。 This 是我想要达到的目标，this 是你向我展示的。差别不大，但你知道，细节很重要：D

你使用的是 webpack 还是 browserify？

是的，Laravel 已经准备好了所有这些

【参考方案2】：

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

module.exports = 
  data() 
    return  counter: 1 
  

这应该适合你

【参考方案3】：

问题是您试图从该文件加载组件“示例”，但您没有为其命名。你应该使用：

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

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

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

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

import Example from ./example

如果您使用 Babel，也可以查看 this post 以获取更多信息