title: Resolve promise inside method when button is clicked
body: <p>I have a 'slideshow' of sorts made of popups in a vue.js template, where each slide is a separate component and the parent component calls each slide in a 'for' loop. Users move from one slide to the other by clicking on a button inside the component. The way I currently have it set up, when the parent calls the 'activates' a slide through <code>this.$refs</code> it toggles a class to make the slide visible, then creates a listener inside of a promise, resolving that promise only when the listener is activated. I'm sure that there is a better way to do this, as it feels like my code breaks some unwritten rules of Javascript by defining a listener inside of a Promise. However, I cannot think of a better way as I am a relative newcomer to JS and Vue. Any help or advice would be appreciated.</p>
  
  <p>The component is called an 'Instruction', as I'm using them to explain different parts of my application.</p>
  
  <p>Button to move slide: <code>&lt;button v-on:submit.prevent name="button-text" :id="'next-instruction-button-'+index"&gt;Next&lt;/button&gt;</code></p>
  
  <p>Code in <code>Instruction</code> component that is used to activate and deactivate the content:</p>
  
  <pre><code>handleClick() {
      return new Promise(res =&gt; {
          var popup = document.getElementById(`myPopup-${this.index}`);
          popup.classList.toggle("show");
  
          /* Not totally sure what I've built here, but it works */
          new Promise(resolve =&gt; {
              document.querySelector(`#next-instruction-button-${this.index}`).addEventListener('click', () =&gt; {
                  return resolve();
              })
          })
          .then(() =&gt; {
              popup.classList.toggle("show");
              res();
          })
      })
  },
  </code></pre>
  
  <p>Calling from parent function:</p>
  
  <pre><code>async showInstructions() {
      for (let i = 1; i &lt;= this.numInstructions; i++) {
          console.log(i)
          await this.$refs[`instruction-${i}`].handleClick();
      }
  },
  </code></pre>
  
  <p>The code for each of the slides is originally from <a href="https://www.w3schools.com/howto/howto_js_popup.asp" rel="nofollow noreferrer">here</a></p>