CODEWITHSUNDEEP
javascriptvue.js
invalid
invalid

Reputation: 1525

How can I wait for button click to make interaction contents with Vue.js?

I want to wait user's click to make interact contents.
And code below is example with vanilla js.
But with Vue.js, I can't add eventlistener to specific dom element dynamically.
Then, how can I make this with 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 });
    });
}

Upvotes: 0

Views: 1309

Answers (1)

Hank X
Hank X

Reputation: 2054

if you want to get value from input after user clicking a button. in your Vue

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

// Edit Based on your comment If you want to run some function as soon as page load, you can

  • run a function in mounted function of Vue component
  • once user click the button, get value, and run left code you want to run

I'm not sure 'you want to run a function and wait for user click button and then run left', if user does not click on button, your function stops anyway.

Upvotes: 1

Related Questions