I've been experimenting with using provide and inject to pass data from parent to child elements, but I'm running into an issue where the data isn't available in the child element. It's strange because when I add the same data directly within the component (commented out), it's visible, but the injected data isn't showing up.
Hello is being printed, but not the passed data
TheResource.vue ---- parent
<template>
<div>
<base-card>
<base-button @click.native="setSelectedTab('stored-resources')">Stored Resources</base-button>
<base-button @click.native="setSelectedTab('add-resource')">Add Resource</base-button>
</base-card>
<component :is="selectedTab"></component>
</div>
</template>
<script>
import StoredResources from './StoredResources';
import AddResource from './AddResource';
export default {
components:{
StoredResources,
AddResource
},
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'
}
]
};
},
provide:{
resources: this.storedResources
},
methods: {
setSelectedTab(tab){
console.log('Clicked')
this.selectedTab = tab;
}
}
}
</script>
StoredResource.vue --- child
<template>
<ul>
<learning-resources v-for="res in resources"
:key="res.id"
:title="res.title"
:description="res.description"
:link="res.link"></learning-resources>
<h1>Hello</h1>
</ul>
</template>
<script>
import LearningResources from './LearningResources';
export default {
inject: ['resources'],
// data(){
// return{
// resources: [
// {
// 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'
// }
// ]
// };
// },
components:{
LearningResources
}
}
</script>
<style scoped>
ul{
list-style: none;
margin: 0;
padding: 0;
margin: auto;
max-width: 40rem;
}
</style>