Question

我觉得我的问题很简单。我有这两个按钮：

<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()，但没有成功。任何人都可以帮忙吗？谢谢！

Answer 1

它不工作的原因是您的 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

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

1 个答案: