Is it possible to use the index on a v-for directive at the same level as the directive itself in order to manipulate the state being displayed?
<template>
<div>
<div v-for="share in sharesPurchased()" :key="share">
<div>
<h4>This is some content</h4>
<p style="border: solid 1px">{{share.count}}</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() {
// Looking to use the index within v-for to control content display
}
}
}
</script>
I am trying to filter the content displayed in this loop to only show items with a count > 0, for example: shares[i].count > 0
If successful, only the value 1 should be displayed in the
<p style="border: solid 1px">{{share.count}}</p>this.shares[0].count is greater than 0.