如何使用 vuejs 对获取的数据使用函数

Question

我正在获取数据；

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>

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

Answer 1

我正在获取数据；

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>

正确的方法是什么？ 我不想像那样使用超时或 smt。

Answer 2

您可以简单地在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