title: How to open open a side panel upon a button press using vue.js?
body: <p>I'm developing my first app with Vue and need some advice with trying to open a panel upon pressing a button in the header.</p>
  
  <p>I'm starting with a basic HTML template, trying to add interactivity after pressing a button that's contained in the header.</p>
  
  <p>When pressing the button, I'm getting the following message in the console:</p>
  
  <blockquote>
    <p>vue.js:597 [Vue warn]: Invalid handler for event "click": got
    undefined</p>
    
    <p>(found in )</p>
  </blockquote>
  
  <p>The code I'm using is as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Doctype HTML5 --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en" /&gt;
  
  &lt;head&gt;
  
    &lt;link rel="stylesheet" href="css/normalize.css"&gt;
  
    {{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
    &lt;link rel="stylesheet" href="{{ $style.Permalink }}"&gt;
  
    &lt;script src="js/vue.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript" src="js/vue-proj-info.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
        &lt;header&gt;
  
        &lt;div class="h-branding"&gt;
          &lt;div id="h-nLogo"&gt;
            &lt;img src="img/med-logo-rev.png"height="70" /&gt;
          &lt;/div&gt;
          &lt;div id="h-title"&gt;
            &lt;h1&gt;Executive Blueprint&lt;/h1&gt;
            &lt;p class="subheader"&gt;&lt;span class="tr-tier"&gt;Tier 1&lt;/span&gt; - &lt;span class="tr-service"&gt;Executive&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="h-toggles"&gt;
          &lt;div class="buttonGroup"&gt;
            &lt;button type="" name="tier1"&gt;Tier 1&lt;/button&gt;
            &lt;button type="" name="tier2"&gt;Tier 2&lt;/button&gt;
            &lt;button type="" name="tier3"&gt;Tier 3&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="buttonGroup"&gt;
            &lt;button type="" name="executive"&gt;Executive&lt;/button&gt;
            &lt;button type="" name="concierge"&gt;Concierge&lt;/button&gt;
          &lt;/div&gt;
  
            &lt;/div&gt;
  
    &lt;proj-slideout ref="proj-slideout" id="proj-slideout" :class="{ isOpen: isOpen }"&gt;&gt;&lt;/proj-slideout&gt;
  
  
        &lt;div id="h-infoButton"&gt;
          &lt;div class="buttonGroup"&gt;
            &lt;button type="button" name="projInfo" class="proj-slideout-opener"
               @click="open"&gt;Project Information&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;/header&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    Vue.component('proj-slideout', {
    template: '#proj-slideout',
    props: ['show'],
    data: () =&gt; ({
      isOpen: false,
      projContent: 'overview' /* overview, jtbd, tiers, files */
    }),
    methods: {
      close() {
        this.isOpen = false;
      },
      open() {
        this.isOpen = true;
        console.log('Open Panel');
      }
    }
  });
  
  document.addEventListener("DOMContentLoaded", function(event) {
    var app = new Vue({
      el: 'header'
    })
  });
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>#proj-slideout {
    position: fixed;
    top: 0;
    right: 0;
    width: 90vw;
    height: 100vh;
    padding: 30px;
    display: flex;
    flex-direction: row;
    background-color: white;
    transform: translateX(-100%);
    transition: transform 0.6s ease(out-cubic);
    display: none;
  
    &amp;.isOpen {
      transform: translateX(0);
    }
  </code></pre>
  
  <p>Any advice would be helpful!</p>