Vue和javascript中的枚举

Question

我想让枚举在vue文件中工作。

我首先在js文件中定义我的枚举

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

我的主。文件无法编译:

<template>
<div v-if="status == AudioCardStatus.Normal">
</template>
import Status from "./../enums/status"

错误

属性或方法状态;不是在实例上定义的，而是在呈现期间引用的。确保这个属性是反应,无论是在数据选项,或基于类组件,通过初始化属性。

我已经看过另一个类似的SO问题，但解决方案似乎是使用Typescript。

Answer 1

您应该将导入的对象添加到data选项中，以便在模板中可用:

import Status from "./../enums/status"
export default{
data(){
return{
status:Status
}
}
}

Answer 2

首先,你进口AudioCardStatusStatus但使用它,还需要给你data财产。

第二，您应该在script标记中导入它。

第三，你不需要额外的./这个../enums/status