Anyone has idea of this error or can see if anything wrong with my syntax that is causing this warning?
TheResources is the parent and StoredResources.vue & LearningResource.vue are childs.
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>
Couldn't figure out where went wrong. So help is much appreciated. Thanks!
It is written here that
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
So, try this in LearningResource.vue
data() {
return {};
},