Traté define una constante en un *.vue archivo

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

y el uso de ellos en plantilla

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

pero parece que no funciona. Así que, ¿cómo podría utilizar const en vue de la plantilla?

InformationsquelleAutor litbear | 2017-03-08

3 Comentarios

  1. 19

    Exponerlos en sus datos.

    new Vue({
        ...
        data:{
            CREATE_ACTION: CREATE_ACTION
            UPDATE_ACTION: UPDATE_ACTION
        }
        ...
    })
    • pero quiero usarlo en otro componente,y … más elegante?
    • puede utilizar los mixins o plugins para incluir cosas en varios componentes, pero para hacer referencia a ellos en una plantilla, usted tendrá que exponer en los datos.
    • gracias ! Voy a intentarlo de nuevo.
    • La desventaja de este enfoque es que estos valores de obtener toda la Vue interactividad (y los gastos) de forma predeterminada. No es genial, pero en pequeñas usos que debería estar bien.
  2. 9

    Puede utilizar plugin para este fin, como usted desea incluir esto en varios componentes:

    //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

    en main.js o donde se definen new Vue(), tienes que usar algo como esto:

    import YourConsts from 'path/to/plugin'
    
    Vue.use(YourConsts)

    Ahora usted puede utilizar esto en un componente de la plantilla como la siguiente:

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

    Lo que sobre el uso de Mixins? Esta es la manera en que lo hago. Seguro que no es el mejor o más recomendable, pero el código es mucho más limpio.

    data/actions.js

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

    Micomponente.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>

Dejar respuesta

Please enter your comment!
Please enter your name here