After successfully building a component that showcases 3D print information, known as a fabmoment, I managed to populate an author-object and a fabmoment-object with data using the $route.params. Here's how:
<script>
import SingleSummarized from './SingleSummarized'
// import Comments from '@/components/Comments/Multiple'
export default {
name: 'Single',
data () {
return {
author: null,
fabmoment: null,
tempLicenseID: null,
license: null
}
},
created () {
this.$http.get(`/users/${this.$route.params.author_id}`)
.then(request => { this.author = request.data })
.catch(() => { alert('Something went wrong when trying to retrieve this user!') })
this.$http.get(`/users/${this.$route.params.author_id}/fabmoments/${this.$route.params.fabmoment_id}`)
.then(request => { this.fabmoment = request.data })
.catch(() => { alert('Something went wrong when trying to retrieve the fabmoment attribute data!') })
this.$http.get(`/licenses/${this.fabmoment.license_id`)
.then(request => { this.license = request.data })
.catch(() => { alert('Something went wrong when trying to retrieve the license!') })
},
components: {
SingleSummarized
// Comments
}
}
</script>
A problem arises in the code where I attempt to fetch a license for the fabmoment using this.fabmoment.license_id. It doesn't work at this point.
Would implementing a tempLicenseID be a viable solution? Since it appears that this.fabmoment is not accessible yet. How can I adjust this to ensure the request is successful? Any better approaches to consider?