title: Better way to add "close modal" button in Vue
body: <p>This works, but I'm sure there is a much better way to do this. Please look at the <code>document.getElementsByClassName()</code> part near the bottom.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;modal&gt;
    &lt;a slot="trigger"&gt;Show Modal&lt;/a&gt;
    &lt;h3 slot="header"&gt;My Heading&lt;/h3&gt;
    &lt;p slot="body"&gt;Here is the body of the modal.&lt;/p&gt;
    &lt;div slot="footer"&gt;
      Here is the footer, with a button to close the modal.
      &lt;button class="close-modal"&gt;Close Modal&lt;/button&gt;
    &lt;/div&gt;
  &lt;/modal&gt;
  </code></pre>
  
  <p>Modal.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;span&gt;
        &lt;span @click="show = true"&gt;
          &lt;slot name="trigger"&gt;&lt;/slot&gt;
        &lt;/span&gt;
        &lt;slot name="header"&gt;&lt;/slot&gt;
        &lt;slot name="body"&gt;&lt;/slot&gt;
        &lt;slot name="footer"&gt;&lt;/slot&gt;
      &lt;/span&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data() {
              return { show: false }
          },
          mounted(that = this) {
            document.getElementsByClassName('close-modal')[0].addEventListener('click', function () {
              that.show = false;
            })
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Is there a better way to do this?</p>