[Vuejs]-Console error because store variable used in template only gets populated after async API call

by

1👍

✅

Since selectedPlan may not be available(or has null value) on the first render, you are facing that error. You have one of three ways to solve this issue:

  1. Add a loader and wait until selectedPlan is available (best way in my opinion from the UX perspective)
  2. Add a null check before accessing values like:
{{ (selectedPlan || {}).periodTitle }}

Or much better, use a computed property:

computed: {
  safeSelectedPlan: () => {
    return this.selectedPlan || {}
  }
}

and then use safeSelectedPlan in your template.

  1. Use a library like lodash to get the values for variables safely.
    Here is the documentation link to lodash: https://lodash.com/docs/4.17.15
👤SerShubham

Leave a comment