web-dev-qa-db-fra.com

Comment pourrais-je utiliser const dans le modèle vue?

J'ai essayé de définir un const dans un *.vue fichier

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

et utilisez-les dans le modèle

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

mais cela ne semble pas fonctionner. Alors, comment pourrais-je utiliser const dans le modèle vue?

javascriptvue.jsvuejs2
13
litbear

Exposez-les sur vos données.

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

Vous pouvez utiliser plugin à cet effet car vous souhaitez l'inclure dans plusieurs composants:

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

dans main.js ou là où vous définissez new Vue(), vous devez l'utiliser comme ceci:

import YourConsts from 'path/to/plugin'

Vue.use(YourConsts)

Vous pouvez maintenant l'utiliser dans un modèle de composant comme suit:

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

Et l'utilisation de Mixins? C'est ainsi que je le fais. Je ne suis pas sûr que ce soit la meilleure méthode ou la méthode recommandée, mais le code semble tellement plus propre.

données/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>
1
MiCc83