vue.js - 在 Vue.js 中将对象作为道具发送并获取 TypeError 和 Warning

Question

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

<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 警告]：渲染错误：“TypeError: Cannot read properties of undefined (reading 'id')”和TypeError: Cannot read properties of undefined (reading 'id')。如果这次我从父组件中删除 ':key="items.product.id"' 我会收到警告，但项目无法再次显示。[Vue 警告]：无效的道具：道具“项目”的类型检查失败。预期的对象，得到值为“00e84ffb-1fbf-00bf-d3cc-adbcc795e060”和[Vue警告]的字符串：无效的道具：道具“项目”的类型检查失败。预期对象，得到值为“carts”的字符串

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

标签： vue.jsvuejs2vue-componentvuexvue-props

Answer 1

这里的问题是 items 是一个对象数组，从 console.log() 可以看出，但您在代码中将其视为对象。您可以通过将某个对象传递给子组件来更改它，如下所示：

        <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[0]"/>  --> only pass first object
            </div>
        </div>

或者您将子组件更改为接受数组，然后像这样在模板中循环遍历数组：

<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 v-for="item in items" :key="item.product.id" class="sold-tickets-actions properties">
                <div class="sold-tickets-inner">
                    <div class="ticket-details">
                        <div class="ticket-prop">
                            <div class="ticket-name">{{ item.product_name }}</div>
                            <div class="ticket-type">{{ item.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: Array,
    },
    components: {DeleteButton},
    data() {
        return {
            image: image,
        };
    },
};
</script>