Vue.js 中使用 API 获取数据更新 Data 属性

在 Vue.js 中，我们经常需要从 API 获取数据并更新到组件的 data 属性中。本文将以一个实际案例展示如何使用 API 获取数据并更新 data 属性。

代码示例:

// 定义数据
data() {
  return {
    studytime: 0,
    leavetime: 0,
    finishtask: 0,
    underfinishtask: 0,
  }
},

// 定义方法
methods: {
  getUserStudy() {
    this.$net.get('/task/notfinish').then(resp => {
      this.studytime = resp.data.data[0]
      this.leavetime = resp.data.data[1]
      this.finishtask = resp.data.data[2]
      this.underfinishtask = resp.data.data[3]
      console.log(this.leavetime)
    })
  }
},

// 挂载后执行
mounted() {
  this.getUserStudy()
}

说明:

1. 在 data 中定义需要更新的属性，并赋予初始值。
2. 在 methods 中定义一个方法 getUserStudy()，用于发送 GET 请求。
3. 使用 this.$net.get('/task/notfinish') 发送 GET 请求，并使用 .then() 方法处理响应。
4. 在 then() 中，将响应数据中的数据更新到对应 data 属性中。
5. 在 mounted() 生命周期钩子函数中，调用 getUserStudy() 方法，在组件挂载后立即发送 GET 请求并更新 data 属性。

通过以上步骤，我们可以成功地将 API 获取的数据更新到 data 属性中，并实现数据绑定，将这些数据渲染到页面上。