Enums in Vue and javascript

user_14243443 0
Viewed 74

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.

vue.js enums javascript
2 Answers

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
     }
   }
}
user_81728570

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

user_118879020
Related