时间戳

首页 > 解决方案 > 您可以通过单击按钮按顺序执行 2 种方法吗？

javascript - 您可以通过单击按钮按顺序执行 2 种方法吗？

问题描述

我认为我的问题很简单。我有这两个按钮：

<button @click="getPartyLeader" class="btn btn-success">Get party leader</button>
  <button @click="saveParty" class="btn btn-success">Submit</button>

我不希望用户必须先单击get party leader按钮，然后再单击提交按钮。是否可以组合这些按钮，以便getPartyLeader首先执行该saveParty方法，并在第一个完成时执行该方法？

我的 javascript 如果你需要它：

import PartyDataService from "@/services/PartyDataService";
import PartyLeaderDataService from "../../services/PartyLeaderDataService";

export default {
  name: "AddParty",
  data() {
    return {
      leaderName: "",
      party: {
        id: null,
        name: "",
        description: "",
        ispartynational: true,
        partyLeader: {id: null, name: "", appearance: ""}
      },
      message:"",

    };
  },
  methods: {
    saveParty() {
      var data = {
        name: this.party.name,
        description: this.party.description,
        ispartynational: true,
        partyLeader: {
          id: this.party.partyLeader.id,
          name: this.party.partyLeader.name,
          appearance: this.party.partyLeader.appearance
        }
      };
      PartyDataService.create(data)
          .then(response => {
            this.party.id = response.data.id;
            console.log(response.data);
            this.message = 'The Party was created successfully!';
          })
          .catch(e => {
            console.log(e);
          });
    },
    newParty() {
      this.party = {};
    },
    getPartyLeader(){
      var leadername = this.leaderName;
      PartyLeaderDataService.findByName(leadername)
      .then(response => {
        this.party.partyLeader.id = response.data.id
        this.party.partyLeader.name = response.data.name
        this.party.partyLeader.appearance = response.data.appearance
        console.log(this.party)
      })
          .catch(e => {
            console.log(e);
          });
    }
  }
}

我已经尝试this.getPartyLeader在方法开始时执行此操作saveParty()，但没有成功。任何人都可以帮忙吗？谢谢！

标签： javascriptvue.jsbutton

解决方案

它不起作用的原因是您的getPartyLeader方法有一个您没有等待的异步组件。我认为您需要的代码是

async saveParty() {
    await this.getPartyLeader()
    ... // the rest of the method
},
async getPartyLeader(){
      var leadername = this.leaderName;
      // Note returning the promise
      return PartyLeaderDataService.findByName(leadername)
      .then(response => {
        this.party.partyLeader.id = response.data.id
        this.party.partyLeader.name = response.data.name
        this.party.partyLeader.appearance = response.data.appearance
        console.log(this.party)
      })
          .catch(e => {
            console.log(e);
          });
    }
}

我假设PartyLeaderDataService.findByName(leadername)返回一个Promise

推荐阅读