我正在尝试渲染以卡片形式存储在商店中的对象数组。但是，我做不到。因为它显示类型错误。 它指出
“呈现错误:“类型错误:无法读取未定义的属性“项目””
我尝试使用此关键字并将代码转移到 mounted() Hook 。
但是，错误不断出现。
代码如下: 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>
这是错误的样子。
这就是行对象的样子
如何消除错误并渲染卡片。
我很乐意将更改后的代码作为答案。 谢谢:)
最佳答案
我认为您的计算属性返回语句有误。
尝试将 return rows[0] 替换为 return rows 以返回数组而不是第一项 :)
我终于发现了一个错误)) 这是我在沙箱中的代码示例:https://codesandbox.io/embed/vue-template-sm0yx
模板有误，只需从 :href="'/dashboard/'+this.item.name" 中删除 this 即可看起来像这样::href="'/dashboard/'+item.name"
那应该行得通!))
关于vue.js - 如何渲染存储在vuex中的数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56577364/