I am currently working on a project with two components - one for uploading files and the other for displaying files. In my Upload Component, I want to call the Preview Component and pass a parameter so that a method in the Preview Component can use a value generated in the Upload Component.
Here is what I have done so far:
UploadComponent.vue
<template>
…
<button @click="upload"></button>
<preview-component :url="this.location"></preview-component>
</template >
<script>
import PreviewComponent from '@/js/components/PreviewComponent';
export default {
components: {
'preview-component': PreviewComponent
},
props: ['url'],
data () {
return {
// ...
location: ''
}
},
methods: {
upload() {
// ... upload stuff then update the global var location
this.location = response.data.location;
},
}
}
</script>
This is my Preview Component:
<template>
<div id="body">
///...
</div>
</template>
<script>
export default {
props: ['url'],
methods: {
loadPdf (url) {
//
},
}
}
</script>
Currently, I am encountering an error where url is not defined, indicating that the url is not being passed from the UploadCOmponent to the PreviewComponent. How can I resolve this issue?