vuex에 저장된 어레이를 렌더링하는 방법

vuex에 저장된 어레이를 렌더링하는 방법

스토어에 저장되어 있는 오브젝트 배열을 카드 형태로 렌더링하려고 합니다.하지만 할 수 없어요.typeError가 표시되므로기재되어 있습니다.

"렌더 오류: "TypeError: 정의되지 않은 속성 '항목'을 읽을 수 없습니다."

이 키워드를 사용하여 코드를 이동하려고 했습니다.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 객체는 다음과 같습니다.

오류를 제거하고 카드를 렌더링하려면 어떻게 해야 합니까?

저는 변경된 코드를 답변으로 받고 싶습니다.감사합니다:)

계산한 재산 반환 명세서를 잘못 보신 것 같습니다.

교환을 시도하다return rows[0]로.return rows첫 번째 항목 대신 배열을 반환하려면:)

---

드디어 오류를 발견하였습니다.)이것은 샌드박스의 코드 샘플입니다.https://codesandbox.io/embed/vue-template-sm0yx

템플릿에 오류가 있습니다. 삭제만 하면 됩니다.this부터:href="'/dashboard/'+this.item.name"다음과 같이 만들 수 있습니다.:href="'/dashboard/'+item.name"

효과가 있을 겁니다!)

언급URL : https://stackoverflow.com/questions/56577364/how-to-render-array-stored-in-vuex