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

尝试这样做

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

Answer 3

尝试定义一个新属性output_df = (pd.get_dummies(df.set_index('id'), prefix_sep='', prefix='') .max(axis=1, level=0) .reset_index()) print (output_df) id Cambridge Liverpool London 0 20 1 0 1 1 10 1 0 1 2 30 0 1 1，并将其用于循环而不是images: []。例如，更改代码，例如：

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>

无法访问对象数组中的属性

3 个答案: