Vue警告data() should return an object问题排查求助

核心报错原因 #

你遇到的data() should return an object警告是LearningResource.vue中的data方法定义错误导致的：
你当前的代码里data()是空实现，没有返回任何值：

// 错误写法
data() {
    
},

Vue要求只要定义了data选项，就必须返回一个对象。如果该组件不需要自有响应式数据，直接删掉整个data选项即可；如果后续需要添加自有数据，就返回空对象：

// 修复写法1：不需要自有数据直接删除整个data选项
// 修复写法2：保留data选项返回空对象
data() {
    return {}
},

其他潜在问题修复 #

除了上述核心报错，你的代码还有几处问题会导致后续运行异常：

• StoredResources.vue 缺少props定义
  你在模板中遍历了resources变量，但没有定义该属性，需要在组件中加props接收父组件传值：

  <script>
  export default {
      props: ['resources']
  }
  </script>
  

• TheResources.vue 存在两处问题
  1. 你贴出的data代码没有包裹在<script>标签和组件导出对象中，需要补全结构
  2. 调用动态组件时没有给子组件传递resources属性，需要补充传值：

  <template>
      <keep-alive>
          <component :is="selectedTab" :resources="storedResources"></component>
      </keep-alive>
  </template>
  <script>
  // 先注册子组件
  import StoredResources from './StoredResources.vue'
  export default {
      components: { StoredResources },
      data() {
          return {
              selectedTab: 'stored-resources',
              storedResources: [
                  {
                      id: 'official-guide',
                      title: 'Official Guide',
                      description: 'The official Vue.js documentation.',
                      link: 'https://vuejs.org'
                  },
                  {
                      id: 'google',
                      title: 'Google',
                      description: 'Learn to Google...',
                      link: 'https://google.org'
                  }
              ],
          };
      },
  }
  </script>
  

内容的提问来源于stack exchange，提问作者HNG