我有一个带有按钮的弹出对话框的函数。我想等待按钮被单击后再执行函数的其余部分。我尝试使用Promise和AddEventListener，但无法找到它不工作的原因。有人能帮助我吗？（我使用Vue 3和Quasar）我有一个“const confirm”错误-对象可能是“null”。ts（2531）谢谢您的建议。
以下是我的模板的一部分：
<q-dialog persistent v-model="phoneDialogBank">
<q-card>
<q-card-section>
<div class="items" v-for="formField in dynamicDialogFieldsVisible" :key="formField?.Key">
<dynamic-form-field :form-field="formField"></dynamic-form-field>
</div>
<div class="row items-center justify-center">
<q-btn color="primary" class="confirm-phone-dialog" v-close-popup>
{{ t('signing-table.phoneDialogBank.ok') }}
</q-btn>
</div>
</q-card-section>
</q-card>
</q-dialog>下面是我的函数：
async function dynamicDialogBeforeSubmit() {
const params = getParamsFromAdvisorDeviceBoolean();
if (params && params.hasOwnProperty('dialogBeforeSubmit') && params.dialogBeforeSubmit) {
phoneDialogBank.value = true;
const confirm = document.querySelector('.confirm-phone-dialog');
const waitForButtonClick = new Promise((resolve) => { confirm.addEventListener('click', resolve); });
await waitForButtonClick.then(() => {
dynamicDialogSave();
});
return;
}
dynamicDialogSave();
}
1条答案
按热度按时间sdnqo3pr1#
这个错误是因为你的按钮在一个有条件呈现的对话框中。所以如果没有对话框，那个DOM元素就不存在。我很好奇为什么你没有使用Vue的一些伟大的特性？比如把点击处理程序放在元素上，使用引用来定位DOM，而不是使用查询选择器和事件监听器。
你的函数有点混淆了async和Promises。
async / await只是一个Promise的语法糖。你现在写它的方式，你是在另一个Promise中 Package 一个Promise。我应该注意到，您可能需要将一个对象传递给
dynamicDialogSave(someObject)，以便它实际保存一些内容。事件监听器不是异步的，你也不想把它们 Package 在一个promise中。如果你想写它，最好把click监听器声明为一个单独的函数，在onMounted上触发，然后从任何异步函数中调用它。你还应该分离本机事件监听器onUnmounted，以避免Vue的内存泄漏。