how to render array stored in vuex

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 :)

Evgeny Melnikov · Accepted Answer · 2019-06-13 10:31:43Z

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!))

edited Jun 13, 2019 at 10:31

answered Jun 13, 2019 at 9:33

Evgeny Melnikov

1,0921 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Evgeny Melnikov Over a year ago

Could you, pls, attach an example output, that console.log(this.rows) prints to the console, in order to go deeper to the problem?

abhigyan nayak Over a year ago

have a look at it..@evgeny

Evgeny Melnikov Over a year ago

Try to replace (row, i) in this.rows to (row, i) of rows and (item, j) in row to (item, j) of row

abhigyan nayak Over a year ago

I also tried transferring the computed: rows() to mounted and storing the value in a variable named rows in data

Evgeny Melnikov Over a year ago

It's better not to use this keyword at templates, because it can depend on the component being rendered. In your case item is already in scope of b-button, that's why direct call is right :)

|

Collectives™ on Stack Overflow

how to render array stored in vuex

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related