vuejs_computed.md

VueJS computed properties

Utilisation en tant que simple get

Context d'exemple 1

Le store nous fournis un getter d'une liste que nous désirons afficher avec un v-for, nous ne voulons pas tous les éléments de la liste.

Option 1 :

On applique un filtre v-if directement dans notre v-for.

<template>
  <div>
    <div v-for="(item, index) in maList" v-if="maList.attribut === 1">
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  
  export default {
    name: 'component',
    computed: {
      ...mapGetters(['maList'])
    }
  }
</script>

Option 2 :

On applique un filtre dans notre computed.

<template>
  <div>
    <div v-for="(item, index) in maListModif">
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  
  export default {
    name: 'component',
    computed: {
      ...mapGetters(['maList']),
      maListModif() {
        return this.maList.filter(item => item.attribut === 1);
      }
    }
  }
</script>

Context d'exemple 2

Le store nous fournis un getter d'une liste de timestamp que nous désirons afficher avec un v-for, nous voulons modifier le format pour l'affichage.

Option 1 :

Utiliser une fonction lors de l'affichage.

<template>
  <div>
    <div v-for="(item, index) in maList">
      {{ fromatTimestamp(item) }}
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  
  export default {
    name: 'component',
    computed: {
      ...mapGetters(['maList'])
    },
    methods: {
      formatTimestamp(unix_timestamp) {
        return new Date(unix_timestamp * 1000).format('h:i:s');
      }
    }
  }
</script>

Option 2:

Utiliser computed pour travailler avec une liste modifié .

<template>
  <div>
    <div v-for="(item, index) in maList">
      item
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  
  export default {
    name: 'component',
    computed: {
      ...mapGetters(['maList']),
      maListModif() {
        return this.maList.forEach(unix_timestamp => new Date(unix_timestamp * 1000).format('h:i:s'))
      }
    }
  }
</script>

Utilisation en tant que set/get

Context d'exemple 2

Le store nous fournis un getter d'un seul élément que nous voulons afficher dans un input pour qu'il soit modifiable par l'utilisateur. L'input sera donc lié à l'élément via v-model, nous travaillons encore avec des timestamp que nous voulons rendre lisible à l'utilisateur.

Option 2:

Utiliser computed pour travailler avec une liste modifié .

<template>
  <div>
    <input v-model=monTimestampFormat/>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  
  export default {
    name: 'component',
    computed: {
      ...mapGetters(['monTimestamp']),
      monTimestampFormat: {
        get() {
          return new Date(this.monTimestamp * 1000).format('h:i:s')
        }
        set(heureString) {
          heureString = ... transformation de heureString en timestamp
        }
      }
    }
  }
</script>