Как я могу использовать const в шаблоне vue?

Я попытался определить const в файле *.vue

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

и использовать их в шаблоне

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

но это не работает. Итак, как я могу использовать const в шаблоне vue?

Ответ 1

Выставляйте их на свои данные.

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

Ответ 2

Вы можете использовать плагин для этой цели, так как вы хотите включить его в несколько компонентов:

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

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

export default YourConsts

в main.js или там, где вы определяете new Vue(), вы должны использовать его следующим образом:

import YourConsts from 'path/to/plugin'

Vue.use(YourConsts)

Теперь вы можете использовать это в шаблоне компонента следующим образом:

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

Ответ 3

Как насчет использования Mixins? Это способ, которым я делаю это. Не уверен, что это лучший или рекомендуемый способ, но код выглядит намного чище.

Данные /actions.js

export const CREATE_ACTION = 1;
export const UPDATE_ACTION = 2;

export const actionsMixin = {
  data() {
    return {
      CREATE_ACTION,
      UPDATE_ACTION
    }      
  }
}

MyComponent.vue

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

<script>
import {actionsMixin, CREATE_ACTION} from './data/actions.js';

export default {
  mixins: [actionsMixin]
  data() {
    return {
      action: CREATE_ACTION
    }      
  }
}
</script>