我试图将一个对象传递到我的子组件中，但它未定义。所以我的父组件：

<template>
    <section id="cart-page" class="row">
        <div v-for="items in cart" :key="items.product.id">
            <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
                <div class="title">WARENKORB</div>
                <SoldTickets :items = "items"/>
            </div>
        </div>
    </section>
</template>
<script>
import image from "../../../../img/Hallenbad.jpg";
import CheckBox from "../components/CheckBox";
import SoldTickets from "../components/SoldTickets";
export default {
    components: {
        CheckBox,
        SoldTickets,
    },
    data(){
        return {
            image: image,
        };
    },
    computed: {
        cart() {
            return this.$store.state.cart;
        },
    },
};
</script>

因此，我将购物车存储到 Vuex 存储中，并且我正确使用它，它是一个如下所示的对象：

因此，我想将此 cart.attributes.items 对象发送到 SoldTickets 组件以在组件内部显示它们。

<template>
    <div id="sold-tickets">
        <div class="card">
            <div class="sold-tickets-actions">
                <div class="sold-tickets-inner">
                    <img class="sold-tickets-image" :src="image" alt="Sold Ticket"/>
                </div>
            </div>
            <div class="sold-tickets-actions properties">
                <div class="sold-tickets-inner">
                    <div class="ticket-details">
                        <div class="ticket-prop">
                            <div class="ticket-name">{{ items.product_name }}</div>
                            <div class="ticket-type">{{ items.variation_name }}</div>
                        </div>
                    </div>
                    <DeleteButton />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import image from "../../../../img/Hallenbad.jpg";
import DeleteButton from "./DeleteButton";
import cartHelper from "../helpers/cartHelper";

export default {
    props: {
        items: Object,
    },
    components: {DeleteButton},
    data() {
        return {
            image: image,
        };
    },
};
</script>

但我收到了错误。 vue.esm.js:628 [Vue warn]: 渲染时出错：“TypeError: 无法读取未定义的属性（读取‘id’）” 和 TypeError: 无法读取未定义的属性（读取‘id’） 。如果我这次从父组件中删除‘:key="items.product.id"’，我会收到警告，但项目无法再次显示。 [Vue warn]: 无效的 prop: prop“items”的类型检查失败。预期对象，得到的字符串值为“00e84ffb-1fbf-00bf-d3cc-adbcc795e060” 和 [Vue warn]: 无效的 prop: prop“items”的类型检查失败。预期对象，得到的字符串值为“carts”

但问题是，如果我尝试在父组件中显示项目，它会在没有警告的情况下工作 &错误。那么您认为为什么会发生这种情况呢？谢谢您的帮助。