How could I use const in vue template?

Question

I tried to defined a const in a *.vue file:

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

And use them in the template:

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

But it does not work. How can I use const in a Vue template?

Answer 1

If you expose them on your data, you are making them unnecessary reactive, as @mix3d mentioned...

A better approach is to add them into Vue object 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>

Answer 2

Expose them on your data:

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

Answer 3

You can use plugin for this purpose as you want to include this in multiple components:

// constsPlugin.js
const YOUR_CONSTS = {
  CREATE_ACTION: 1,
  UPDATE_ACTION: 2
  ...
}

let YourConsts = {}; // As suggested by the comments.

YourConsts.install = function (Vue, options) {
  Vue.prototype.$getConst = (key) => {
    return YOUR_CONSTS[key]
  }
}

export default YourConsts

in main.js or where you define new Vue(), you have to use it like this:

import YourConsts from 'path/to/plugin'

Vue.use(YourConsts)

Now you can use this in a component template like following:

<div>
   <select :disabled="mode === $getConst('UPDATE_ACTION')">
</div>