How can I run some computed in vue.js 2? - vue.js

Question

My vue component (second component) like this :
<template>
<div class="row">
<div v-for="item in options">
<div class="panel panel-default panel-product">
....
</div>
</div>
<div>
<a href="#" class="panel-more">
<span>{{priceMin}} test {{priceMax}}</span>
</a>
</div>
</div>
</template>
<script>
...
export default {
...
computed: {
...mapGetters([
'getListByPrice', 'getPriceMin', 'getPriceMax'
]),
options() {
return this['getListByPrice']
},
priceMin() {
return this['getPriceMin']
},
priceMax() {
return this['getPriceMax']
},
},
...
}
</script>
If the code executed, the data shown does not match
If I console.log(this['getListByPrice']), there are 5 data. But shown in loops of more than 5 data
If I remove the code :
<span>{{priceMin}} test {{priceMax}}</span>
The result is correct
Why if I call priceMin and priceMax by computed, the result shown does not match?

Answer 1

I think that you don't need:
options() {
return this['getListByPrice']
},
priceMin() {
return this['getPriceMin']
},
priceMax() {
return this['getPriceMax']
},
Just use the items in ...mapGetters directly in your mustache tags. Also, use vue's chrome plugin to examine your vuex store.
You posted your vuex store so this comment addresses that. Your store is incorrect. price should be in your store, not priceMax and priceMin. Those are mutations of the state. Please read through the vuex docs.