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

Posted 2023-02-22

【中文标题】如何根据 axios 响应更新 vue 数据？

【英文标题】：How do I update vue data based on axios response?

【发布时间】：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() 中的值

在答案中添加了代码更改示例

【参考方案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);
      );
  
;