Hello, I'm currently attempting to await a button click within a vue3 method. My goal is to trigger a function by clicking a button and then wait for the user to click either the "confirm" or "cancel" button. I am utilizing the vue3 developer CDN for this project. Here's my current code snippet:
<div v-if="hasAccess('FTO') && !selectedPlayerLoading" id="ftosheet-container">
<div class="ftosheet-title noselect">FTO Sheet
<span v-if="hasAccess('FTO')" v-on:click='editFTOSheet()' style="float: right;">
<i class="fas fa-edit"></i>
</span>
</div>
<textarea class="ftosheet-text" v-model="selectedPlayer.ftosheet" :readonly="editingFTOSheet === false">
</textarea>
<div id="ftobutton-container">
<button v-if="editingFTOSheet" id="saveftobutton">Save FTO Sheet</button>
<button v-if="editingFTOSheet" id="cancelftobutton">Cancel</button>
</div>
</div>
OnButtonPress() {
Vue.nextTick(function () {
return new Promise((resolve) => {
const confirm = document.getElementById('saveftobutton')
confirm.addEventListener('click', function() {
resolve(true);
});
const deny = document.getElementById('cancelftobutton')
deny.addEventListener('click', function() {
resolve(false);
});
});
})
},
async editFTOSheet() {
this.editingFTOSheet = !this.editingFTOSheet;
if (this.editingFTOSheet) {
const uneditedSheet = this.selectedPlayer.ftosheet;
const buttonPress = await this.OnButtonPress();
console.log(buttonPress);
//TODO: Make work with await button press
}
},
Due to the fact that the buttons are only rendered after clicking the "edit" button, I believe I need to use nextTick here? VS Code also indicates that await has no effect in this context. The console prints undefined immediately after calling the OnButtonPress() function. Please feel free to reach out if you require more information. Thank you!