Как обновить данные vue на основе ответа ax ios? - PullRequest
Новая
       13

Как обновить данные vue на основе ответа ax ios?

1 голос
/ 05 мая 2020

Как я могу поместить данные из ax ios в 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);
      });
  }
};

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

Это происходит потому, что значения опции data оцениваются до вызова даже метода mounted. Итак, если value установлен изначально, то maintemp1 и maintemp2 - пустые строки. Кроме того, value не является здесь вычисляемым свойством, поэтому он также не отслеживает изменения для maintemp1 и maintemp2. Один из вариантов - установить value внутри метода ax ios .then().

Итак, сначала установите value в пустой массив в data, например: 

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

а затем внутри 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;

    this.value = [parseInt(this.maintemp1), parseInt( this.maintemp2)];
  })
  .catch(error => {
    console.log(error);
  });
0 голосов
/ 05 мая 2020

Ваш value является вычисляемым свойством. data содержит список статических c вещей, которые могут изменяться с течением времени в вашем компоненте, но они по-прежнему являются просто значениями. Если ваше свойство динамически зависит от других свойств, оно должно быть в computed, как показано ниже: 

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