Не удается получить доступ к свойству в массиве объектов

Question

У меня есть эти данные в моем компоненте ProductsShow. vue, и когда я пытаюсь отобразить изображения продукта через свойство path, я получаю эту ошибку

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>

Answer 1

Вы никогда не должны доверять данным из другого места, например, из удаленного сервера.

Код довольно легко взломать из-за неверных данных, таких как нулевой продукт, нулевые изображения, изображение без тропинка. Так что в реальной практике игры с данными очень рекомендуется добавить проверку типа и значения, чтобы гарантировать, что доступ всегда безопасен.

Как и в Vuejs, это довольно легко сделать, используя v-if, только отображает часть шаблона, когда сохраненные данные (продукт, изображения, изображение) предоставлены как ожидалось. Это называется «Защитное программирование».

Answer 2

Попробуйте определить новое свойство images: [] и используйте его для l oop вместо image in product.images. Например, измените ваш код следующим образом:

<vue-glide :per-view="1">
  <vue-glide-slide v-for="image in images">
    <div class="h-100 bg-red-500">
      <img :src="/images/ + image.path" alt="">
    </div>
  </vue-glide-slide>
</vue-glide>

data () {
  return {
    product: null,
    images: [],
    quantity: 1
  }
},
mounted() {
  axios.get('/api/products/' + this.$route.params.id)
    .then(response => {
      this.product = response.data.data;
      if (response.data.data.images) {
        // Check if images exist in response.data.data
        this.images = response.data.data.images
      }
    })
    .catch(error => {
      alert('Unable to fetch product.')
    });
}

Answer 3

попробуйте, если это работает

    data: function () {
      return {
        product: {
          name:'',
          images:[]
        },
        quantity: 1
      }
    },