how to render array stored in vuex - vue.js

Question

I am trying to render array of objects stored in store in the form of cards. But, I am not able to. Since it shows typeError.
It states
"error in render: "TypeError: Cannot read property 'item' of undefined"
I tried using this keyword and shifting the code to mounted() hook.
But, the error keeps on showing.
Here is the code:
CardRenderer.vue:
<template lang="html">
<div>
<b-container class="bv-example-row">
<b-row v-for="(row, i) in this. rows" v-bind:key="i">
<b-col v-for="(item, j) in row" v-bind:key="j" >
<!-- you card -->
<b-card
:title="item.title"
img-src="item.icon"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2"
>
<b-card-text>
<h1>{{item.name}}</h1>
<pre>{{item.description}}</pre>
</b-card-text>
<b-button :href="'/dashboard/'+this.item.name" variant="primary">More</b-button>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script lang="js">
export default {
name: 'CardRenderer',
props: {
},
data() {
return {
// rows: []
}
},
mounted() {
},
methods: {
},
computed: {
rows() {
const itemsPerRow = 3
var rows = []
let arr = this.$store.getters.responseAPI.apps
// eslint-disable-next-line
console.log(arr)
for (let i = 0; i < arr.length; i += itemsPerRow){
let row = []
for (let z = 0; z < itemsPerRow; z++) {
row.push(arr[z])
}
rows.push(row)
}
// eslint-disable-next-line
// console.log(this.rows)
return rows[0]
}
}
}
</script>
<style scoped>
</style>
This is how the error looks like.
and this is how the rows object looks like
How do i remove the error and the render the card.
I would love to have the changed code as the answer.
Thanks :)

Answer 1

I think you have a mistake at the computed property return statement.
Try replacing return rows[0] to return rows to return an array instead of the first item :)
I've finally caught an error))
This is my code sample at sandbox: https://codesandbox.io/embed/vue-template-sm0yx
You've got a mistake at the template, just remove this from :href="'/dashboard/'+this.item.name" to make it look like this: :href="'/dashboard/'+item.name"
That should work!))