时间戳

首页 > 解决方案 > 如何等待按钮点击与 Vue.js 进行交互内容？

javascript - 如何等待按钮点击与 Vue.js 进行交互内容？

问题描述

我想等待用户点击来制作交互内容。
下面的代码是 vanilla js 的示例。
但是使用 Vue.js，我不能动态地将事件监听器添加到特定的 dom 元素。
那么，我怎样才能用 Vue.js 做到这一点呢？ 

async mainTask(){
  //something...
  showText.innerText += "please input value and then click ok button.\n";
  const input = await waitInput();
  //...
}

async function waitInput() {
    return new Promise(resolve => {
        okButton.addEventListener("click",() => {
            const text = someinput.value;
            resolve();
        }, { once:true });
    });
}

标签： javascriptvue.js

解决方案

如果您想在用户单击按钮后从输入中获取价值。在你的 Vue

<template>
 <input v-modle="valueYouWant" />
 <button @click="getValueAndDoSth">
</template>
<script>
// ... common vue script header
 getValueandDoSth(){
  // return this.valueYouWant
}
</script>

// 根据您的评论编辑如果您想在页面加载后立即运行某些功能，您可以

  • mounted在Vue 组件的函数中运行一个函数
  • 一旦用户单击按钮，获取值并运行要运行的左侧代码

我不确定'你想运行一个函数并等待用户点击按钮然后向左运行'，如果用户没有点击按钮，你的函数无论如何都会停止。

推荐阅读