title: How to use enums (or const) in VueJS?
body: <p>I feel like an idiot for having to ask about something so seemingly simple, but I'm trying to figure out how to use "enums" in VueJS. Currently, in a file called <code>LandingPage.js</code> I have this bit of code:</p>
  
  <pre class="lang-js prettyprint-override"><code>const Form = {
    LOGIN: 0,
    SIGN_UP: 1,
    FORGOT_PASSWORD: 2,
  };
  
  function main() {
    new Vue({
      el: "#landing-page",
      components: {
        LoginForm,
        WhoIsBehindSection,
        WhatIsSection,
        Form,
      },
      data () {
        return {
          form: Form.LOGIN,
        };
      },
      template: `
      &lt;div&gt;
        &lt;LoginForm v-if="form === Form.LOGIN"&gt;&lt;/LoginForm&gt;
        &lt;WhatIsSection&gt;&lt;/WhatIsSection&gt;
        &lt;WhoIsBehindSection&gt;&lt;/WhoIsBehindSection&gt;
      &lt;/div&gt;
      `
    });
  }
  </code></pre>
  
  <p>It is the conditional <code>v-if="form === Form.LOGIN"</code> that is failing with the error messages:</p>
  
  <blockquote>
    <ul>
    <li><p>Property or method "Form" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.</p></li>
    <li><p>Cannot read property 'LOGIN' of undefined</p></li>
    </ul>
  </blockquote>
  
  <p>Just so you guys know without the conditional everything is working, and if I were to put this bit in the template</p>
  
  <pre><code>&lt;p&gt;{{ form }}&lt;/p&gt;
  </code></pre>
  
  <p>it will print <code>0</code> on the screen. Though, putting this in the template</p>
  
  <pre><code>&lt;p&gt;{{ Form.LOGIN }}&lt;/p&gt;
  </code></pre>
  
  <p>Will not result in it printing <code>0</code> on the screen. So I just cannot for the life of me figure out why it will not accept <code>Form.LOGIN</code>.</p>
  
  <p>&nbsp;</p>
  
  <p><strong>The Answer</strong></p>
  
  <p>I did add it to <code>components</code>, but never did I think of adding it to <code>data</code>. Happy that it's working now. :)</p>
  
  <pre class="lang-js prettyprint-override"><code>    data () {
        return {
          form: Form.LOGIN,
          Form, // I had to add this bit
        };
      },
  </code></pre>
  
  <p>Thank you <a href="https://stackoverflow.com/users/11641932/marcro">MarcRo</a> </p>