What is the best way to synchronize Vue data with the response from an axios request?

Question

What is the best way to synchronize Vue data with the response from an axios request?

Is there a way to incorporate data retrieved from axios into vue js data?

value: [parseInt(this.maintemp1),parseInt( this.maintemp2)], <--------This is where I'm facing an issue

    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)], <--------This is where I'm encountering a 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);
      });
  }
};

javascript arrays vue.js axios vuetify.js

Answer 1

Answer №1

The reason for this occurrence is that the values of the data option are evaluated before the mounted method is called. Therefore, when the initial value of value is set, both maintemp1 and maintemp2 are empty strings. Additionally, since value is not a computed property, it does not monitor changes to maintemp1 or maintemp2. One solution is to assign the value of value inside the axios .then() method.

To address this issue, first ensure that value is initialized as an empty array in the data section:

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

Then within the mounted method, update it accordingly:

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);
  });

Answer 2

The reason for this occurrence is that the values of the data option are evaluated before the mounted method is called. Therefore, when the initial value of value is set, both maintemp1 and maintemp2 are empty strings. Additionally, since value is not a computed property, it does not monitor changes to maintemp1 or maintemp2. One solution is to assign the value of value inside the axios .then() method.

To address this issue, first ensure that value is initialized as an empty array in the data section:

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

Then within the mounted method, update it accordingly:

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);
  });

Answer 3

Answer №2

Your result is a calculated outcome. The info holds an array of fixed entities that could vary in your element as time goes by, but they only represent the values. If your outcome relies dynamically on other variables, it should be included in calculated like so:

export default {
  info: () => ({
    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
  }),
  calculated: {
     result() {
       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);
      });
  }
};

Answer 4

Your result is a calculated outcome. The info holds an array of fixed entities that could vary in your element as time goes by, but they only represent the values. If your outcome relies dynamically on other variables, it should be included in calculated like so:

export default {
  info: () => ({
    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
  }),
  calculated: {
     result() {
       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);
      });
  }
};

What is the best way to synchronize Vue data with the response from an axios request?

Answer №1

Answer №2

Similar questions

Initial request fails to retrieve cookie generated by Javascript

The first instance of an object retains its class, but subsequent instances may change

Step by step guide on sending an array of objects along with files using FormData

Error: the function was not defined and has not been caught

Converting an array of Binding values to a Binding<[type]> instead of an array of Binding<type> in Swift/SwiftUI

Is there a way to trigger another API call when clicking a button in Vue.js?

Creating an interactive dropdown menu in React JS on click

Having trouble with the page layout in AngularJS

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

The debate between ensuring input validity and making fields mandatory on multi-page forms

Struggling to set values for Player Object?

Encountering an issue... invariant.js:42 Error: A `string` value was received instead of a function for the `onClick` listener

`Using Rollup to combine local typescript files into a single main bundle`

How can I utilize a Vuex store to establish a default image?

The concept of matryoshka logic applied to data manipulation

What is the best way to send a POST request using axios with both body and form data included at the

Creating a Scroll Bar with HTML and CSS

Issue with Argument Validation in Internet Explorer 11 while using Vue.js

Is there a specific method that can be implemented in Node.js to compare two strings and identify the common words or letters?

What is the method for obtaining the image alt attribute using JavaScript?