My question is quite straightforward. I have two buttons:
<button @click="getPartyLeader" class="btn btn-success">Get party leader</button>
<button @click="saveParty" class="btn btn-success">Submit</button>
I want to streamline the process so that the getPartyLeader method runs first and then the saveParty method executes automatically afterwards. Is there a way to combine these buttons to achieve this?
Here is my 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);
});
}
}
}
I attempted to call this.getPartyLeader at the beginning of the saveParty() method without success. Any help would be greatly appreciated. Thank you!