如何在 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”未在实例上定义，而是在渲染期间引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

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

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

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

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

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

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

 

答案

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

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

谢谢MarcRo

Answer 1

如果你在 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>

Answer 2

您可以使用/sf/answers/4180016711/。

const State= Object.freeze({ Active: 1, Inactive: 2 });
export default {
  data() {
    return {
      State,
      state: State.Active
    };
  },
  methods: {
    method() {
      return state==State.Active;
    }
  }
}

Answer 3

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

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

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

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