如何渲染存储在vuex中的数组

Question

我正在尝试以卡片的形式呈现存储在商店中的对象数组。但是，我做不到。因为它显示类型错误。 它指出

“渲染中的错误：“TypeError：无法读取未定义的属性'item'”

我尝试使用这个关键字并将代码转移到mounted() 挂钩。 但是，错误一直显示。

代码如下： 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>

这就是错误的样子。

这就是 rows 对象的样子

如何消除错误并渲染卡片。

我希望将更改后的代码作为答案。 谢谢:)

Answer 1

我认为您在计算属性返回语句处有一个错误。

尝试将return rows[0] 替换为return rows 以返回一个数组而不是第一项:)

---

我终于发现了一个错误）） 这是我在沙盒中的代码示例：https://codesandbox.io/embed/vue-template-sm0yx

您的模板有误，只需从:href="'/dashboard/'+this.item.name" 中删除this 使其看起来像这样：:href="'/dashboard/'+item.name"

应该可以！））