CODEWITHSUNDEEP
vue.jsvuex
soulsako20
soulsako20

Reputation: 233

How do I manipulate Getters in computed property before using it in the html template?

I am mapping getters from my Vuex store as a computed property and want to manipulate the property (its an array of objects) before using it in the component template. Any idea how I can do that?

I have tried watching the computed property but that doesn't work.

import {mapGetters} from 'vuex
computed: {
  ...mapGetters([
   'property'
    ])
}

Upvotes: 1

Views: 549

Answers (1)

Franck Abgrall
Franck Abgrall

Reputation: 141

You can use your getter in another custom property like you will do for a simple variable :

<template>
  <div>
    <div v-for="item in transformedItems" :key="item">{{item}}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['items']),
    transformedItems() {
      return this.items.map(item => item.name)
    }
  }
}
</script>

And then you can use transformedItems in your template

Upvotes: 2

Related Questions