Ошибка в подключенном хуке: "ReferenceError: сообщения не определены в Vuejs

Question

Я новичок ie в Vuejs. Я пытаюсь научиться кодировать vuejs в течение пары часов, пока не получу эту ошибку. Думаю, проблема в том, что проблема заключается в том, чтобы перейти к Blade. Вот мой код.

// Blade View

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

Answer 1

Вы должны использовать this при доступе к вашим данным (если у вас нет другой области, определенной внутри). И вы пытаетесь получить доступ к свойствам неопределенного объекта (post) в forEach l oop.

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