How to use enums (or const) in VueJS?

Solution 1:

If you are using Vue in Typescript, then you can use:

import { TernaryStatus } from '../enum/MyEnums';  

export default class MyClass extends Vue {

      myVariable: TernaryStatus = TernaryStatus.Started;

      TernaryStatus: any = TernaryStatus;  

 }

and then in Template you can just use

<div>Status: {{ myVariable == TernaryStatus.Started ? "Started It" : "Stopped it" }}</div>

Solution 2:

You can use https://stackoverflow.com/a/59714524/3706939.

const State= Object.freeze({ Active: 1, Inactive: 2 });
export default {
  data() {
    return {
      State,
      state: State.Active
    };
  },
  methods: {
    method() {
      return state==State.Active;
    }
  }
}

Solution 3:

You only have access to properties of the Vue instance in your template. Just try accessing window or any global in your template, for example.

Hence, you can access {{ form }} but not {{ Form.LOGIN }}.

A wild guess is that it has something to do with how Vue compiles, but I don't know enough about the internals to answer this.

So just keep declaring all the properties you wish to use in your template in your Vue instance (usually as data).