如何使用 vuejs 获取数据的函数答案

【问题标题】：How can I use functions on fetched data with vuejs如何使用 vuejs 获取数据的函数
【发布时间】：2021-04-25 15:21:55
【问题描述】：

我正在获取数据；

data() {
  return {
    staffs: "",
    salaries:0,
    loading:true,
  };
},

methods: {
  async getStaffs() {
    const result = await axios.get(
      "/api/staffs/"
    );
    this.staffs = result.data
    this.loading = false
  },

  totalSalary(){

  for(var i = 0 ;i++;i<this.staffs.length){
    this.salaries += this.staffs[i].job.salary
  }
},

mounted() {
  this.getStaffs()
  this.totalSalary()
},

}

我想在获取数据后计算总工资并将其呈现为

<span >Total Salary: {{salaries}}</span>

正确的做法是什么？我不想像那样使用 timeout 或 smt。

【问题讨论】：

标签： javascript vue.js axios fetch

【解决方案1】：

您可以在 mounted 挂钩中简单地使用 async/await

data() {
    return {
      staffs: "",
      salaries:0,
      loading:true,
    };
  },

methods: {
    async getStaffs() {
      const result = await axios.get(
        "/api/staffs/"
      );
      this.staffs = result.data
      this.loading = false
    },
    totalSalary(){
      for(var i = 0 ;i++;i<this.staffs.length){
        this.salaries += this.staffs[i].job.salary
      }
  },


  async mounted() {
       await this.getStaffs() // wait for getStafss to finish executing
       this.totalSalary()
  },

但是，在您的情况下，我建议使用 computed 道具来计算 totalSalary

【讨论】：

感谢您的回答，我是用计算完成的