如何在 VueJS 中使用枚举（或常量）？

Question

不得不问一些看似简单的问题，我觉得自己像个白痴，但我正试图弄清楚如何在 VueJS 中使用“枚举”。目前，在一个名为 LandingPage.js 的文件中，我有这段代码：

 const Form = {
  LOGIN: 0,
  SIGN_UP: 1,
  FORGOT_PASSWORD: 2,
};

function main() {
  new Vue({
    el: "#landing-page",
    components: {
      LoginForm,
      WhoIsBehindSection,
      WhatIsSection,
      Form,
    },
    data () {
      return {
        form: Form.LOGIN,
      };
    },
    template: `
    <div>
      <LoginForm v-if="form === Form.LOGIN"></LoginForm>
      <WhatIsSection></WhatIsSection>
      <WhoIsBehindSection></WhoIsBehindSection>
    </div>
    `
  });
}

这是有条件的 v-if="form === Form.LOGIN" 失败并显示错误消息：

• 属性或方法“Form”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

• 无法读取未定义的属性“LOGIN”

只是让你们知道没有条件一切都在工作，如果我要把这个位放在模板中

<p>{{ form }}</p>

它将在屏幕上打印 0 。虽然，把它放在模板中

<p>{{ Form.LOGIN }}</p>

不会导致它在屏幕上打印 0 。所以我一生都无法弄清楚为什么它不接受 Form.LOGIN 。

答案

我确实将它添加到 components ，但我从未想过将它添加到 data 。很高兴它现在正在工作。 :)

     data () {
      return {
        form: Form.LOGIN,
        Form, // I had to add this bit
      };
    },

谢谢马克罗 👍

原文由 G. Thorsen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您只能访问模板中 Vue 实例的属性。例如，只需尝试访问 window 或模板中的任何全局变量。

因此，您可以访问 {{ form }} 但不能访问 --- {{ Form.LOGIN }} 。

一个疯狂的猜测是它与 Vue 的编译方式有关，但我对内部结构了解得不够多，无法回答这个问题。

因此，只需在 Vue 实例中继续声明您希望在模板中使用的所有属性（通常为 data ）。

原文由 MarcRo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你在 Typescript 中使用 Vue，那么你可以使用：

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

export default class MyClass extends Vue {

      myVariable: TernaryStatus = TernaryStatus.Started;

      TernaryStatus: any = TernaryStatus;

 }

然后在模板中你可以使用

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

原文由 Mahesh 发布，翻译遵循 CC BY-SA 4.0 许可协议