我是Vuejs的新手。我试图学习vuejs的代码长达两个小时,直到出现此错误。我猜问题出在道具到Blade上。这是我的代码。
//刀片视图
<div id="app">
<div :posts="{{ $posts }}"></div>
</div>
// Vue模板
<table striped hover :items="imageList">
<template slot="image" slot-scope="data">
<img :src="'storage/images' + data.item.image" alt="">
</template>
</table>
// Vue JS
<script>
export default {
props:['posts'],
data: function() {
return {
imageList: []
};
},
mounted() {
this.fetch_image_list();
},
methods: {
fetch_image_list() {
let items = [];
if (Array.isArray(posts.data) && posts.data.length) {
posts.data.forEach((image,key) => {
let currentImage = {
'id':post.id,
'name':post.name,
'image':post.img,
}
items.push(currentImage)
});
this.imageList = items;
}
}
}
}
</script>
答案 0 :(得分:0)
访问数据时,应使用this
(如果未定义其他作用域)。并且您正在尝试在post
循环中访问未定义对象(forEach
)的属性。
methods: {
fetch_image_list() {
let items = [];
if (Array.isArray(this.posts.data) && this.posts.data.length) {
this.posts.data.forEach((post, key) => {
let currentImage = {
'id':post.id,
'name':post.name,
'image':post.img,
}
items.push(currentImage)
});
this.imageList = items
}
}
}