I am struggling with the code I have.
main.js
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
App.vue
<template>
<div id="app">
// struggling to pass data to component
<basics :resume="resume"></basics>
<education :resume="resume"></education>
// trying to access values from json file
{{resumeData.name}}
{{resumeData.education}}
</div>
</template>
<script>
import Basics from './components/Basics.vue'
import Education from './components/Education.vue'
import Resume from '../resume.json'
export default {
name: 'app',
data() {
return {
resumeData: Resume
}
},
components: {
Basics,
Education
}
}
</script>
/components/Basics.vue
<template>
<div>
<p>Basics</p>
// having trouble accessing values from json file
{{resumeData.name}}
</div>
</template>
/components/Education.vue
<template>
<div>
<p>Education</p>
{{resumeData.education}}
</div>
</template>
How can I effectively share data between vue components from the same json file without repeating
import Resume from '../resume.jsonYour assistance in clarifying this issue is greatly appreciated.