在 Vue.js 中将对象作为 props 发送并获取 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 warn]: 渲染错误：“TypeError: 无法读取未定义的属性（读取 'id'）” 和 TypeError : 无法读取未定义的属性（读取 'id'）。如果我这次从父组件中删除 ':key="items.product.id"' 我会收到警告，但无法再次显示项目。 [Vue 警告]：无效道具：道具“项目”的类型检查失败。预期的对象，得到值为“00e84ffb-1fbf-00bf-d3cc-adbcc795e060”的字符串 和 [Vue warn]：无效的道具：道具“项目”的类型检查失败。预期对象，得到值为“carts”的字符串

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

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>

Answer 2

问题是您正在遍历对象 cart，它有很多键，其中一些值为 strings（例如：“00e84ffb-1fbf-00bf-d3cc-adbcc795e060 ")，同时您的子组件希望接收一个对象。这就是它吐出错误的原因。您可以在此处阅读有关 List Rendering with an Object 的更多信息。

我的建议：

如果你的子组件需要cart.attributes.items，那么发送它，将你的计算属性 cart更改为数组：

computed: {
    cart() {
        return this.$store.state.cart.attributes?.items || [];
    }
}

在模板中，将item数组传给子组件，变量item应该是单数形式，你可以随意命名，但为了清楚起见，请使用单数形式：

<div v-for="item in cart" :key="item.id">
        <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
            <div class="title">WARENKORB</div>
            <SoldTickets :item = "item"/>
        </div>
    </div>

别忘了更改道具声明：

props: {
    items: Array,
}

在 Vue.js 中将对象作为 props 发送并获取 TypeError 和 Warning

Sending object as a props in Vue.js and getting TypeError and Warning

vue.js

vue-component

vuex

vuejs2

vue-props