安装的挂钩中出现错误:“ ReferenceError:在Vuejs中未定义帖子

时间:2020-03-04 12:02:25

标签: laravel vue.js

我是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>

1 个答案:

答案 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
        }
    }
}