如何根据 axios 响应更新 vue 数据？答案

【问题标题】：How do I update vue data based on axios response?如何根据 axios 响应更新 vue 数据？
【发布时间】：2020-08-19 17:28:54
【问题描述】：

如何将axios中的数据放到vue js数据中：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);
      });
  }
};

【问题讨论】：

因为它依赖于其他数据属性，所以将value 设为computed 属性。 value: [parseInt(this.maintemp1),parseInt( this.maintemp2)], 不锁定函数，而是 data() 中的值
在答案中添加了代码更改示例

标签： javascript arrays vue.js axios vuetify.js

【解决方案1】：

发生这种情况是因为 data 选项值在调用 mounted 方法之前进行了评估。因此，当最初设置 value 时，maintemp1 和 maintemp2 是空字符串。此外，value 不是此处的计算属性，因此它也不跟踪 maintemp1 和 maintemp2 的更改。一种选择是在 axios .then() 方法中设置 value。

所以，首先将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);
  });

【讨论】：

【解决方案2】：

您的value 是一个计算属性。 data 包含静态事物的列表，这些事物会随着时间的推移在您的组件中发生变化，但它们仍然只是值。如果您的属性动态依赖于其他属性，您应该将其放在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);
      });
  }
};

【讨论】：