vue w/ axios should get-request with a variable retrieved from another get-request

Question

When building a component that contains 3D print information named a fabmoment , I succeeded using the $route.params filling an author-object and a fabmoment-object with information, like so:

<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>

In the created part you can see I also am trying to retrieve a license for the fabmoment using this.fabmoment.license_id . It fails on this line.

Is a tempLicenseID an idea? Because I suspect the this.fabmoment is not available yet. And how would I use this to make the request work? Or any other more sensible solution?

Answer 1

You have to make the request for the licenses after you have retrieved the fabmoment object:

this.$http.get(`/users/${this.$route.params.author_id}/fabmoments/${this.$route.params.fabmoment_id}`)
    .then(request => { return this.fabmoment = request.data })
    .then( fabmoment => this.$http.get(`/licenses/${fabmoment.license_id`)
    .then(request => { this.license = request.data })
    .catch(() => { alert('Something went wrong when trying to retrieve the fabmoment attribute data!') })