Enums in Vue and javascript

Question

I want to make enums work in in vue file.

I first define my enums in a js file

const Status= Object.freeze({
    Normal: "normal",
    Loading: "loading",
    Error: "error",
    Done: "done",
});

export default Status;

My main.vue file can't compile:

<template>
    <div v-if="status == AudioCardStatus.Normal">
</template>

import Status from "./../enums/status"

Error is

Property or method "Status" 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.

I have already looked at another similar SO question but the solution seems to be to use Typescript.

Answer 1

You should add that imported object to the data option in order to be available for the template:

import Status from "./../enums/status"

export default{
   data(){
     return{
        status:Status
     }
   }
}

Answer 2

First, You import it as Status but use it as AudioCardStatus , Also you need to asign it to property in your data .

Second, you should import it inside a script tag.

Third, you don't need the extra ./ this enough ../enums/status