如何在 vue 模板中使用 const？

Question

我试图在 *.vue 文件中定义一个 const --- ：

 <script>
    export const CREATE_ACTION = 1,
    export const UPDATE_ACTION = 2
<script>

并在模板中使用它们：

 <template>
    ...
    <select :disabled="mode === UPDATE_ACTION">
    ....
</template>

但它不起作用。如何在 Vue 模板中使用 const ？

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

Answer 1

将它们暴露在您的数据上：

 new Vue({
    data:{
        CREATE_ACTION: CREATE_ACTION,
        UPDATE_ACTION: UPDATE_ACTION
    }
})

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

Answer 2

如果您将它们暴露在您的数据中，那么就像@mix3d 提到的那样，您会使它们变得不必要的反应……

更好的方法是将它们添加到 Vue 对象 Reactivity in Depth 中：

 <template>
      <div v-if="action === CREATE_ACTION">Something</div>
</template>

<script>
export default {
    created() {
        this.CREATE_ACTION = CREATE_ACTION;
        this.UPDATE_ACTION = UPDATE_ACTION;
    }
})
</script>

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