CODEWITHSUNDEEP
javascriptarraysvue.jsaxiosvuetify.js
Jalol
Jalol

Reputation: 23

How do I update vue data based on axios response?

How can I put data from axios to vue js data: value: [parseInt(this.maintemp1),parseInt( this.maintemp2)], <--------Here is my problem

    export default {
  data: () => ({
    maincity: "",
    maintemp1: "",
    maintemp2: "",
    maindate1: "",
    showLabels: true,
    lineWidth: 2,
    labelSize: 7,
    radius: 10,
    padding: 8,
    lineCap: "round",
    gradient: gradients[5],
    value: [parseInt(this.maintemp1),parseInt( this.maintemp2)], <--------Here is my problem
    gradientDirection: "top",
    gradients,
    fill: true,
    type: "trend",
    autoLineWidth: false
  }),
  mounted() {
    axios
      .get(
        "http://api.openweathermap.org/data/2.5/forecast?q=khiva&units=metric&appid=myapi"
      )
      .then(response => {
        this.wholeResponse = response.data.Search;
        this.maincity = response.data.city.name;
        this.maindate1 = response.data.list[1].dt_txt;
        this.maintemp1 = response.data.list[1].main.temp;
        this.maintemp2 = response.data.list[9].main.temp;
      })
      .catch(error => {
        console.log(error);
      });
  }
};

Upvotes: 1

Views: 1272

Answers (2)

palaѕн
palaѕн

Reputation: 73976

This happens because data option values are evaluated before even mounted method is called. So, when value is set initially then maintemp1 & maintemp2 are empty strings. Also, value is not a computed property here, thus it does not track the changes for maintemp1 & maintemp2 either. One option is to set the value inside the axios .then() method.

So, first set value to an empty array in data like:

data: () => ({
  ...
  value: [],
    ..
}),

and then inside mounted update like:

axios
  .get(
    "http://api.openweathermap.org/data/2.5/forecast?q=khiva&units=metric&appid=myapi"
  )
  .then(response => {
    this.wholeResponse = response.data.Search;
    this.maincity = response.data.city.name;
    this.maindate1 = response.data.list[1].dt_txt;
    this.maintemp1 = response.data.list[1].main.temp;
    this.maintemp2 = response.data.list[9].main.temp;

    this.value = [parseInt(this.maintemp1), parseInt( this.maintemp2)];
  })
  .catch(error => {
    console.log(error);
  });

Upvotes: 1

kiddorails
kiddorails

Reputation: 13014

Your value is a computed property. data contains list of static things which can change over the time in your component, but they are still just the values. If your property is dynamically dependent on other properties, you should have it in computed like below:

export default {
  data: () => ({
    maincity: "",
    maintemp1: "",
    maintemp2: "",
    maindate1: "",
    showLabels: true,
    lineWidth: 2,
    labelSize: 7,
    radius: 10,
    padding: 8,
    lineCap: "round",
    gradient: gradients[5],
    gradientDirection: "top",
    gradients,
    fill: true,
    type: "trend",
    autoLineWidth: false
  }),
  computed: {
     value() {
       return [parseInt(this.maintemp1),parseInt( this.maintemp2)],
     }
  },
  mounted() {
    axios
      .get(
        "http://api.openweathermap.org/data/2.5/forecast?q=khiva&units=metric&appid=myapi"
      )
      .then(response => {
        this.wholeResponse = response.data.Search;
        this.maincity = response.data.city.name;
        this.maindate1 = response.data.list[1].dt_txt;
        this.maintemp1 = response.data.list[1].main.temp;
        this.maintemp2 = response.data.list[9].main.temp;
      })
      .catch(error => {
        console.log(error);
      });
  }
};

Upvotes: 0

Related Questions