[Vuejs]-Uncaught TypeError: Cannot read property 'country' of undefined

by

0👍

✅

You are accessing a nested object value, so you will need something like this:

<h1>{{weatherData.sys && weatherData.sys.country}}</h1>

Why the error appears you can read here.

0👍

Very probable you did not initiallize the value of weatherData as and object with those values at your data(), as you are doing an async request the view is rendered before getting the value from the call. So just go to your data() and write

data() {
  weatherData: {
  sys: { 
     country: ' '
    }
  // all other stuff from the reponse
  }

And also you can write a v-if directive inside your p tags or div tavs to not be rendered till you have the response from the API so like

v-if="weatherData != undefined (or whaterver value you asign at your data() object)"

Leave a comment