Vue 警告 data() 应该 return 一个 object

Question

任何人都知道这个错误，或者可以看看我的语法是否有任何错误导致了这个警告？

TheResources 是 parent 和 StoredResources.vue & LearningResource.vue 是孩子。

data() should return an object. at <LearningResource key="official-guide" id="official-guide" title="Official Guide"  ... > 
  at <StoredResources> 
  at <KeepAlive> 
  at <TheResources> 
  at <App>

TheResources.vue

<template>
    <keep-alive>
            <component :is="selectedTab"></component>
    </keep-alive>
</template>

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'
                }
            ],
        };
    },

StoredResources.vue

<template>
    <ul>
        <learning-resource
            v-for="res in resources" 
            :key="res.id" 
            :id="res.id"
            :title="res.title"
            :description="res.description"
            :link="res.link"
        ></learning-resource>
    </ul>
</template>

LearningResource.vue

<template>
    <li>
        <base-card>
            <header>
                <h3>{{ title }}</h3>
                <base-button mode="flat" @click="removeResource(id)">Delete</base-button>
            </header>
            <p>{{ description }}</p>
            <nav>
                <a :href="link">View Resource</a>
            </nav>
        </base-card>
    </li>
</template>

<script>
export default {
    props: [
        'id',
        'title',
        'description',
        'link'
    ],
    inject: ['removeResource'],
    data() {
        
    },
}
</script>

无法弄清楚哪里出了问题。因此，非常感谢您的帮助。谢谢！

Answer 1

here写着

The data option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as $data

所以，在 LearningResource.vue

中试试这个

data() {
   return {};        
},

Vue 警告 data() 应该 return 一个 object

Vue warn data() should return an object

javascript

return

vue.js