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.

All JS should be located in script tag. Is this your exact code in main.vue ? If it's not then there's a problem with the question. "the solution seems to be to use Typescript" - answers aren't limited to the first post, you can read them all. Enums are TS constructs, that's why TS appeared in search results. It doesn't matter what's the role of the constant is and whether you use Object.freeze, it's treated the same way in your case, this is basically a var from another module — Estus Flask
– Estus Flask, Commented Jul 3, 2022 at 7:36

Boussadjra Brahim · Accepted Answer · 2022-07-03 07:21:29Z

3

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

answered Jul 3, 2022 at 7:21

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mina · Accepted Answer · 2022-07-03 07:25:21Z

0

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

answered Jul 3, 2022 at 7:25

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Collectives™ on Stack Overflow

Enums in Vue and javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related