I need to use index on a v-for
but on the on the same level as the
directiveitself in order to
mutate``` the state being shown.
<template>
<div>
<div v-for="share in sharesPurchased(shares)" :key="share">
<div>
<h4>This is some content</h4>
<p style="border: solid 1px">{{share.count | wasPurchased}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
shares: [
{id: 'BMW', count: 1},
{id: 'Ford', count: 0},
{id:'Apple', count: 10}
]
}
},
methods: {
sharesPurchased(arr) {
return arr
}
},
filters: {
wasPurchased(value) {
if (value > 0) {
return value
}
}
}
}
</script>
I tried applying a filter on the p
tag but it obviously did not work. I am sure that this function
should all run within the v-for
but I did not manage to figure out how to mess with the index
as v-for does loop already.
I am leaving this filter in order to explain that I want to show just content with shares[i].count > 0