[Vuejs]-Undefined variable – While api fetch | Axios | Props

by

1👍

✅

api isn’t defined in the data for the first component, so it won’t be reactive. That should be giving you a warning message in the console.

data () {
  return {
    api: null,
    isLoading: false,
    result: []
  };
}

The second problem is that when the component first renders it won’t yet have loaded api from the server. Using await won’t help with this, rendering the template will happen before the asynchronous request has completed.

Given the way componentA is currently written it won’t be able to cope with api being missing when it is first created. So you’ll need to use a v-if to defer creation until that data is available:

<ComponentA v-if="api" :api="api.somevariable"></ComponentA>

Without the v-if check it’ll just be passing the initial value of api, which in your original code is undefined. That is what caused the warning mentioned in the question.

When you talk about ‘quoting and requoting of console.logs’, I would assume that those changes are just triggering hot reloading, which could easily cause components to re-render with the new data. That wouldn’t happen otherwise because of the lack of reactivity caused by api not being included in the original data.

👤skirtle

Leave a comment