javascript - Can't access a property in an array of objects

问题描述

I have this data here in my ProductsShow.vue component and when I try to display the product's images through the path property I get this error

Error in render: "TypeError: Cannot read property 'path' of undefined"

ProductsShow.vue

    <template>
    <div class="container mx-auto mt-10">
        <div class="flex">
            <!--            product-->
            <div class="w-2/3">
                <div class="flex">
                    <!--                    product image-->
                    <div class="w-1/2">
                        <vue-glide :per-view="1">
                            <vue-glide-slide v-for="image in product.images">
                                <div class="h-100 bg-red-500">
                                    <img :src="/images/ + image.path" alt="">
                                </div>
                            </vue-glide-slide>
                        </vue-glide>
                    </div>
                    <!--                    product details-->
                    <div class="w-1/2 bg-white px-4">
                        <p class="mt-4 text-xl font-bold text-gray-700">{{ product.name }}</p>
                        <div class="mt-4">
                            <i class="fas fa-star text-red-500 fa-sm"></i>
                            <i class="fas fa-star text-red-500 fa-sm"></i>
                            <i class="fas fa-star text-red-500 fa-sm"></i>
                            <i class="fas fa-star text-red-500 fa-sm"></i>
                            <i class="fas fa-star text-red-500 fa-sm"></i>
                            <span class="text-sm text-gray-700">34 Reviews</span>
                        </div>
                        <p class="mt-4 text-xl text-gray-900 font-bold">150 Dhs</p>
                        <div class="text-lg text-justify mt-4 leading-normal text-gray-700">
                            Open-source electronic prototyping platform enabling users to create interactive electronic objects.
                        </div>

                        <!--                        quantity-->
                        <div class="mt-4">
                            <button @click="stepDown" class="bg-gray-100 hover:bg-gray-200 w-6 h-6 rounded-full focus:outline-none">
                                <span>&#65293;</span>
                            </button>
                            <input type="number" v-model="quantity" class="text-center w-8 outline-none" min="1">
                            <button @click="stepUp" class="bg-gray-100 hover:bg-gray-200 w-6 h-6 rounded-full focus:outline-none">
                                <span>&#65291;</span>
                            </button>
                            <span class="ml-4 text-sm text-gray-500">137 pieces available</span>
                        </div>

                        <div class="my-4">
                            <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded-sm focus:outline-none">
                                Buy now
                            </button>
                            <button @click="addToCart" class="ml-2 bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded-sm focus:outline-none">
                                Add to cart
                            </button>
                            <button class="ml-2 bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded-sm focus:outline-none">
                                <i class="far fa-heart text-red-500"></i> 24
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-1/3">
                <div class="flex">
                    <div class="w-1/2 bg-gray-500 h-40"></div>
                    <div class="w-1/2 bg-gray-400 h-40"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Glide, GlideSlide } from 'vue-glide-js';
    import 'vue-glide-js/dist/vue-glide.css';
    export default {
        name: "ProductsShow",

        components: {
            [Glide.name]: Glide,
            [GlideSlide.name]: GlideSlide
        },

        mounted() {

            axios.get('/api/products/' + this.$route.params.id)
                .then(response => {
                    this.product = response.data.data;
                })
                .catch(error => {
                    alert('Unable to fetch product.')
                });

        },

        data: function() {
            return {
                product: null,
                quantity: 1
            }
        },

        methods: {

            addToCart: function() {
                this.product.quantity = this.quantity;
                axios.post('/api/cart', this.product)
                    .then(response => {
                        console.log(response.data);
                    })
                    .catch(error => {

                    });
            },

            stepDown: function () {
                if (this.quantity > 1) {
                    this.quantity--;
                }
            },

            stepUp: function () {
                this.quantity++;
            }
        }
    }
</script>

<style scoped>
    input[type="number"] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }
</style>

标签： javascriptlaravelvue.js

javascript - Can't access a property in an array of objects

问题描述

解决方案

推荐阅读